{% extends "admin.html" %}

{% block content %}

    <div class="padding-md">
        <h1>
            <i class="fa fa-gears"></i>
            <a href="/docs/api/">API</a>
        </h1>
    </div>

    <div class="dashboard-wrapper">
        <div class="dashboard-main">

            {% if endpoint %}
                {% if token %}
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                <span class="pull-left">
                    Access Token
                </span>
                    </div>
                    <div class="panel-body no-padding">
                        <div class="input-group">
                            <input type="text" readonly name="token" maxlength="255" id="token" value="{{ token }}"
                                   class="form-control ">
                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <span class="pull-left">
                            {{ endpoint.name }}
                        </span>
                    </div>
                    <div class="panel-body no-padding">
                        <div class="padding-md">


                            <h4>Method</h4>
                            {{ endpoint.method }}
                            <h4>URL</h4>
                            <code>
                                {{ endpoint.url }}
                            </code>

                            <h4>Input</h4>

                            {% if endpoint.query_params or endpoint.input_params %}
                            <table class="table table-striped table-bordered table-hover" id="dataTable">
                                <thead>
                                <tr>
                                    <th>Verbose Name</th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Required</th>
                                    <th>Detail</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for param in endpoint.query_params %}
                                    <tr>
                                        <td>{{ param.verbose_name }}</td>
                                        <td>{{ param.name }}</td>
                                        <td>{{ param.type }}</td>
                                        <td>{{ param.required|format }}</td>
                                        <td>{{ param.help_text|format }}</td>
                                    </tr>
                                {% endfor %}
                                {% for param in endpoint.input_params %}
                                    <tr>
                                        <td>{{ param.verbose_name }}</td>
                                        <td>{{ param.name }}</td>
                                        <td>{{ param.type }}</td>
                                        <td>{{ param.required|format }}</td>
                                        <td>{{ param.help_text|format }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            {% endif %}

                            {% if token %}
                            {{ form }}
                            {% endif %}

                            {% if result %}
                                <h5>Command</h5>
                                <strong>{{ cmd }}</strong>
                                <h5>Output</h5>
                                <code>
                                    {{ result|safe }}
                                </code>
                            {% endif %}

                        </div>
                    </div>
                </div>
            {% else %}
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <span class="pull-left">
                            About
                        </span>
                    </div>
                    <div class="panel-body no-padding">
                        <img width="200px" style="float: left" src="/static/images/api.svg"/>
                        <p>This page contains the documentation necessery to use the applicaton API. It also
                        alows the execution of the endpoints inplace and displays the <strong>curl</strong>
                        comand that can be used to reproduce the execution in the terminal.</p>
                        <p>In oder to list the available endpoints for a specific model, click on the model
                        in the panel beside. Click on the endpoint to views its documentation or execute it.</p>
                        <p>Your token will be displayed on the top of the page and will be used in the executions.
                        To execute with another user's token, execute the endpoint "get_token" from the model "User".</p>
                    </div>
                </div>
            {% endif %}
        </div>

        <div class="dashboard-aside dashboard-aside-1">
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                    <span class="pull-left">
                        {{ documentation.title }}
                    </span>
                    {% if documentation.model %}
                    <span class="pull-right">
                        <a class="ajax" href="/docs/api/"><i class="fa fa-reply"></i></a>
                    </span>
                    {% endif %}
                </div>
                <div class="panel-body no-padding">
                    <div class="padding-md">
                        {% for verbose_name, url in documentation.index %}
                            <h4>{{ verbose_name }}</h4>
                            <a class="ajax" href="{{ url }}">{{ url }}</a>
                        {% endfor %}
                        {% for endpoint in documentation.endpoints %}
                            <h4>{{ endpoint.name }}</h4>
                            <a class="ajax" href="{{ endpoint.doc_url }}">{{ endpoint.url }}</a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
