{% load i18n %}

{% if app_list %}
<div class="accordion" id="accordionExample">
  
{% for app in app_list %}
<div class="accordion-item">
  <h2 class="accordion-header m-0">
    <button class="accordion-button py-2 {% if opts.app_label != app.app_label %}collapsed{% endif %} " type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ app.app_label }}" aria-expanded="false" aria-controls="collapse{{ app.app_label }}">
      {% if app.app_label == 'auth'  %}{% endif %}{{ app.name|safe }}
    </button>
  </h2>
  <div id="collapse{{ app.app_label }}" class="accordion-collapse collapse {% if opts.app_label == app.app_label %}show{% endif %}" data-bs-parent="#accordionExample">
    <div class="accordion-body p-0">
      <table class="table w-100">
        <thead class="visually-hidden">
          <tr>
            <th scope="col">{% translate 'Model name' %}</th>
            <th scope="col">{% translate 'Add link' %}</th>
            <th scope="col">{% translate 'Change or view list link' %}</th>
          </tr>
        </thead>
        {% for model in app.models %}
        
          {% with model_name=model.object_name|lower %}
            <tr class="model-{{ model_name }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
              <th scope="row" id="{{ app.app_label }}-{{ model_name }}">
                {% if model.admin_url %}
                  <a href="{{ model.admin_url }}"{% if model.admin_url in request.path|urlencode %} aria-current="page"{% endif %}>{{ model.name }}</a>
                {% else %}
                  {{ model.name }}
                {% endif %}
              </th>

              {% if model.add_url %}
                <td><a href="{{ model.add_url }}" class="addlink" aria-describedby="{{ app.app_label }}-{{ model_name }}">{% translate 'Add' %}</a></td>
              {% else %}
                <td></td>
              {% endif %}

              {% if model.admin_url and show_changelinks %}
                {% if model.view_only %}
                  <td><a href="{{ model.admin_url }}" class="viewlink" aria-describedby="{{ app.app_label }}-{{ model_name }}">{% translate 'View' %}</a></td>
                {% else %}
                  <td><a href="{{ model.admin_url }}" class="changelink" aria-describedby="{{ app.app_label }}-{{ model_name }}">{% translate 'Change' %}</a></td>
                {% endif %}
              {% elif show_changelinks %}
                <td></td>
              {% endif %}
            </tr>
          {% endwith %}
        
        {% endfor %}
      </table>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
      var collapseElements = document.querySelectorAll('.collapse');
      collapseElements.forEach(function(element) {
          new bootstrap.Collapse(element, {toggle: false});
      });
  });
  </script>
  <style>
    #accordionExample .collapse:not(.show) {
      display: none !important;
  }
  </style>
{% endfor %}
</div>
{% else %}
  <p>{% translate 'You don’t have permission to view or edit anything.' %}</p>
{% endif %}
