{% extends "admin/change_list.html" %}
{% block result_list %}
  <style>
    .grid-container {
      display: flex;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    .card {
      background-color: #fff;
      border: 1px solid #ddd;
      padding: 16px;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .card-title {
      font-size: 1.1em;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .card-info {
      font-size: 0.9em;
      margin-bottom: 4px;
    }

    .card a {
      color: #0d6efd;
      text-decoration: none;
    }

    .card a:hover {
      text-decoration: underline;
    }
  </style>

  {% if cl.result_count %}
    <div class="grid-container col-12">
      {% for obj in cl.result_list %}
        <div class="card col-lg-3 col-xl-2">
          <!--
          <div class="card-title">
            <a href="">{{ obj }}</a><i class="fas fa-user"> </i>
          </div>-->
          <div>
            <div class="text-center"> <i class="fas fa-globe text-info fa-4x"></i> </div>
            <div class="text-center">
            	<small> {{ obj }}
            </div>
          </div>
          <!-- Exemple : ajoute ici des champs personnalisés -->
          {% if obj.date_created %}
            
            <!-- <div class="card-info">Créé le : {{ obj.date_created|date:"d/m/Y" }}</div> -->
          {% endif %}
          {% if obj.description %}
            <!-- <div class="card-info">{{ obj.description|truncatewords:15 }}</div> -->
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p>Aucun élément trouvé.</p>
  {% endif %}
{% endblock %}
