{% extends "gui/base.html" %}
{% load request_static %}
{% load i18n %}
{% load rest_framework %}

{% block custom_style %}
{% endblock %}

{% block common_sciprt %}
    <!-- jQuery 2.2.3 -->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>-->
    <script src="{% static_path 'admin/js/vendor/jquery/jquery.min.js' %}?v={{gui_version}}"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

    <!-- Bootstrap 3.3.6 -->
    <!--<script defer src="{% static_path 'bootstrap/js/bootstrap.min.js' %}?v={{gui_version}}"></script>-->
    <script defer src="{% static_path 'AdminLTE-3.0.0/plugins/bootstrap/js/bootstrap.bundle.min.js' %}?v={{gui_version}}"></script>
{% endblock %}

{% block bootstrap_theme %}
    <link rel="stylesheet" type="text/css" href="{% static_path "rest_framework/css/prettify.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static_path "rest_framework/css/default.css" %}"/>
{% endblock %}

{% block script %}
    <script>
    window.drf = {
    csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
            csrfCookieName: "{{ csrf_cookie_name|default:'csrftoken' }}"
    };</script>
    <script src="{% static_path "rest_framework/js/ajax-form.js" %}"></script>
    <script src="{% static_path "rest_framework/js/csrf.js" %}"></script>
    <script src="{% static_path "rest_framework/js/prettify-min.js" %}"></script>
    <script src="{% static_path "rest_framework/js/default.js" %}"></script>
    <script>
    $(document).ready(function() {
        $('form').ajaxForm();
        $('.help-popover').popover({html: true, trigger:'hover'});
    });
    </script>

    <script>
        function sendOptionQuery(path)
        {
            return $.ajax({
                url: path,
                type: 'OPTIONS',
                dataType: 'html',
            }).done( data => {
                let html = $.parseHTML(data);
                let el =  $(html).find('.response-info');
                if(el.length != 0)
                {
                    let new_content = el[0].innerHTML;
                    $($('.response-info')[0]).html(new_content);
                    prettyPrint();
                }
            })
        }
    </script>
{% endblock %}


{% block content %}
    <!-- Main content -->

    <section class="content-header">
        {% comment "Old description" %}
        <!--<h1>{% if name %}{{ name }}{% endif %}
            <small>
                {% block description %}
                {{ description }}
                {% if not description %}{{ name }}{% endif %}
                {% endblock %}
            </small>
        </h1>-->
        {% endcomment %}
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <h1 class="h1-header-api">
                        {% if name %}{{ name }}{% endif %}
                        {% block description %}
                            {% if not description == "<p></p>" %}
                                <small>
                                    <a class="fa fa-question-circle help-popover"
                                       data-container="body" data-toggle="popover"
                                       data-placement="right" data-content="{{ description }}">
                                    </a>
                                </small>
                            {% endif %}
                        {% endblock %}
                    </h1>
                </div>
                <div class="col-lg-6">
                    <ol class="breadcrumb float-sm-right">
                        {% block breadcrumbs %}
                        <li class="breadcrumb-item"><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
                        {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
                            {% if forloop.last %}
                            <li class="breadcrumb-item active"><a href="{{ breadcrumb_url }}"> {{ breadcrumb_name }}</a></li>
                            {% else %}
                            <li class="breadcrumb-item"><a href="{{ breadcrumb_url }}"> {{ breadcrumb_name }}</a></li>
                            {% endif %}
                        {% endfor %}
                        {% endblock %}
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    {% if 'GET' in allowed_methods %}
                    <form id="get-form" class="pull-right">
                        <fieldset>
                            {% if api_settings.URL_FORMAT_OVERRIDE %}
                            <div class="btn-group format-selection">
                                <a class="btn btn-primary js-tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</a>

                                <button class="btn btn-primary dropdown-toggle js-tooltip" data-toggle="dropdown" title="Specify a format for the GET request">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    {% for format in available_formats %}
                                    <li class="dropdown-item">
                                        <a class="js-tooltip format-option" href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}" rel="nofollow" title="Make a GET request on the {{ name }} resource with the format set to `{{ format }}`">{{ format }}</a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% else %}
                            <a class="btn btn-primary js-tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</a>
                            {% endif %}
                        </fieldset>
                    </form>
                    {% endif %}

                    {% if options_form %}
                        <button class="btn btn-primary button-form js-tooltip" title="Make an OPTIONS request on the {{ name }} resource" href="{{ request.get_full_path }}" onclick="return sendOptionQuery(this.href)">OPTIONS</button>
                    {% endif %}

                    {% if delete_form %}
                    <button class="btn btn-danger button-form js-tooltip" title="Make a DELETE request on the {{ name }} resource" data-toggle="modal" data-target="#deleteModal">DELETE</button>

                    <!-- Delete Modal -->
                    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <h4 class="text-center">Are you sure you want to delete this {{ name }}?</h4>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <form class="button-form" action="{{ request.get_full_path }}" data-method="DELETE">
                                        <button class="btn btn-danger">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    {% if filter_form %}
                    <button style="float: right; margin-right: 10px" data-toggle="modal" data-target="#filtersModal" class="btn btn-default">
                        <span class="fa fa-wrench" aria-hidden="true"></span>
                        {% trans "Filters" %}
                    </button>
                    {% endif %}

                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-12">
                        {% if paginator %}
                        <nav style="float: right">
                            {% get_pagination_html paginator %}
                        </nav>
                        {% endif %}

                        <div class="request-info" style="clear: both" >
                            <pre class="prettyprint"><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
                        </div>

                        <div class="response-info">
                            <pre class="prettyprint"><span class="meta nocode"><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% autoescape off %}
    {% for key, val in response_headers.items %}<b>{{ key }}:</b> <span class="lit">{{ val|break_long_headers|urlize_quoted_links }}</span>
    {% endfor %}
    </span>{{ content|urlize_quoted_links }}</pre>{% endautoescape %}
                        </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-12">

                    {% if display_edit_forms %}
                    {% if post_form or raw_data_post_form %}
                    <div {% if post_form %}class="tabbable"{% endif %}>
                        {% if post_form %}
                        <ul class="nav nav-tabs form-switcher">
                            <li class="nav-item">
                                <a class="nav-link" name='html-tab' href="#post-object-form" data-toggle="tab">HTML form</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" name='raw-tab' href="#post-generic-content-form" data-toggle="tab">Raw data</a>
                            </li>
                        </ul>
                        {% endif %}

                        <div class="well tab-content">
                            {% if post_form %}
                            <div class="tab-pane" id="post-object-form">
                                {% with form=post_form %}
                                <form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" class="form-horizontal" novalidate>
                                    <fieldset>
                                        {% csrf_token %}
                                        {{ post_form }}
                                        <div class="form-actions">
                                            <button class="btn btn-primary" title="Make a POST request on the {{ name }} resource">POST</button>
                                        </div>
                                    </fieldset>
                                </form>
                                {% endwith %}
                            </div>
                            {% endif %}

                            <div {% if post_form %}class="tab-pane"{% endif %} id="post-generic-content-form">
                                {% with form=raw_data_post_form %}
                                <form action="{{ request.get_full_path }}" method="POST" class="form-horizontal">
                                    <fieldset>
                                        {% include "rest_framework/raw_data_form.html" %}
                                        <div class="form-actions">
                                            <button class="btn btn-primary" title="Make a POST request on the {{ name }} resource">POST</button>
                                        </div>
                                    </fieldset>
                                </form>
                                {% endwith %}
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    {% if put_form or raw_data_put_form or raw_data_patch_form %}
                    <div {% if put_form %}class="tabbable"{% endif %}>
                        {% if put_form %}
                        <ul class="nav nav-tabs form-switcher">
                            <li class="nav-item">
                                <a class="nav-link" name='html-tab' href="#put-object-form" data-toggle="tab">HTML form</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" name='raw-tab' href="#put-generic-content-form" data-toggle="tab">Raw data</a>
                            </li>
                        </ul>
                        {% endif %}

                        <div class="well tab-content">
                            {% if put_form %}
                            <div class="tab-pane" id="put-object-form">
                                <form action="{{ request.get_full_path }}" data-method="PUT" enctype="multipart/form-data" class="form-horizontal" novalidate>
                                    <fieldset>
                                        {{ put_form }}
                                        <div class="form-actions">
                                            <button class="btn btn-primary js-tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                            {% endif %}

                            <div {% if put_form %}class="tab-pane"{% endif %} id="put-generic-content-form">
                                {% with form=raw_data_put_or_patch_form %}
                                <form action="{{ request.get_full_path }}" data-method="PUT" class="form-horizontal">
                                    <fieldset>
                                        {% include "rest_framework/raw_data_form.html" %}
                                        <div class="form-actions">
                                            {% if raw_data_put_form %}
                                            <button class="btn btn-primary js-tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
                                            {% endif %}
                                            {% if raw_data_patch_form %}
                                            <button data-method="PATCH" class="btn btn-primary js-tooltip" title="Make a PATCH request on the {{ name }} resource">PATCH</button>
                                            {% endif %}
                                        </div>
                                    </fieldset>
                                </form>
                                {% endwith %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </section>


{% if filter_form %}
{{ filter_form }}
{% endif %}
{% endblock %}