{% extends "rest_framework_docs/docs.html" %}

{% block apps_menu %}
{% regroup endpoints by labels as endpoints_grouped %}
{% if endpoints_grouped|length > 1 %}
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Jump
        To <span class="caret"></span></a>
    <ul class="dropdown-menu">
        {% for group in endpoints_grouped %}
        <li><a href="#{{ group.grouper.name|slugify }}-group">{{ group.grouper.name }}</a></li>
        {% endfor %}
    </ul>
</li>
{% endif %}
{% endblock %}


{% block content %}
{% regroup endpoints by labels as endpoints_grouped %}
{% if endpoints_grouped %}
{% for group in endpoints_grouped %}
<h1 id="{{ group.grouper.name|slugify }}-group">
    {% if group.grouper.parent %}
    <a href="{% url 'drfdocs-filter' group.grouper.parent %}">{{ group.grouper.name }}</a>
    {% endif %}
</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.fields_json }}">
                            <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">{{ endpoint.docstring|linebreaksbr }}</p>
                {% endif %}

                {% if endpoint.errors %}
                <div class="alert alert-danger" role="alert">Oops! There was something wrong with {{ endpoint.errors }}.
                    Please check your code.
                </div>
                {% endif %}
                {% if endpoint.fields %}
                <p class="fields-desc">Fields:</p>
                {% include 'rest_framework_docs/fields.html' with item=endpoint only %}
                {% elif not endpoint.errors %}
                <p>No fields.</p>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}

</div>

{% endfor %}
{% elif not query %}
<h2 class="text-center">There are currently no api endpoints to document.</h2>
{% else %}
<h2 class="text-center">No endpoints found for {{ 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">Live API Endpoints <span class="label label-info">Beta</span></h4>
            </div>

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

{% endblock %}