{% regroup endpoints by name_parent as endpoints_grouped %}

{% if endpoints_grouped %}
    {% for group in endpoints_grouped %}

        <h1 id="{{ group.grouper|lower }}-group">{{group.grouper}}</h1>

        <div class="panel-group" role="tablist">

        {% for endpoint in group.list %}

          <div class="panel panel-default endpoint">

            <div class="panel-heading" role="tab" data-toggle="collapse" data-target="#{{ endpoint.path|slugify }}">
              <div class="row">
                <div class="col-md-7">
                  <h4 class="panel-title title">
                    <i class="fa fa-link"></i> {{ endpoint.path }}
                  </h4>
                </div>

                <div class="col-md-5">
                  <ul class="list-inline methods">
                    {% for method in endpoint.allowed_methods %}
                      <li class="method {{ method|lower }}">{{ method }}</li>
                    {% endfor %}
                      <li class="method plug"
                        data-toggle="modal"
                        data-path="{{ endpoint.path }}"
                        data-methods="{{ endpoint.allowed_methods }}"
                        data-permissions="{{ endpoint.permissions }}"
                        data-fields="{{ endpoint.json_fields }}">
                        <i class="fa fa-plug"></i></li>
                  </ul>
                </div>
              </div>
            </div>

            <div id="{{ endpoint.path|slugify }}" class="panel-collapse collapse" role="tabpanel">
              <div class="panel-body">
                {% if endpoint.docstring %}
                  <p class="lead" style="font-size: 18px">{{ endpoint.docstring|safe }}</p>
                {% endif %}

                {% if endpoint.errors %}
                    <div class="alert alert-danger" role="alert">Упс! Что-то не так с {{ endpoint.errors }}. Пожалуйста, проверьте ваш код.</div>
                {% endif %}

                {% if endpoint.fields %}
                    {% include "drf_auto/blocks/fields_list.html" with fields=endpoint.fields methods_docs=endpoint.methods_docs %}
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}

    </div>
{% endfor %}

{% elif not query %}
    <h2 class="text-center">К сожалению апи в данный момент не работает. Мы пытаемся это исправить.</h2>
{% else %}
    <h2 class="text-center">Нет возможности проверить апи {{ query }}.</h2>
{% endif %}

<!-- Modal -->
<div class="modal fade api-modal" id="liveAPIModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Проверка АПИ <span class="label label-info">Beta</span></h4>
        </div>

        <div id="liveAPIEndpoints"></div>
      </div>
    </div>
</div>