{% extends "gap_admin/base.html" %}
{% block title %}Список шаблонов{% endblock %}
{% block content %}

<script>

    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });

    var cachedTemplates = {
    {% for template in templates %}
        '{{ template.id }}': {
            'title': '{{ template.title }}',
            'type': '{{ template.type }}',
            'tag': '{{ template.tag }}',
            'workflows': '{{ template.workflows }}',
            'organization_ids': '{{ template.organization_ids }}',
            'city_ids': '{{ template.city_ids }}',
            'langs': '{{ template.langs }}',
            'edit_url': '{{ template.edit_url }}'
        },
    {% endfor %}
    }

    function onTemplatesItemClick(templateId) {
        cachedTemplate = cachedTemplates[templateId];
        cachedTemplateId = templateId;
        $("#id").html(templateId);
        $("#title").html(cachedTemplate['title']);
        $("#type").html(cachedTemplate['type']);
        $("#tag").html(cachedTemplate['tag']);
        $("#workflows").html(cachedTemplate['workflows']);
        $("#organization_ids").html(cachedTemplate['organization_ids']);
        $("#city_ids").html(cachedTemplate['city_ids']);
        $("#langs").html(cachedTemplate['langs']);
        $("#edit_button").attr("href", cachedTemplate['edit_url']);
    }

    function removeTemplate() {
        $.ajax({
            url: '/_gap_admin/remove_template/' + cachedTemplateId,
            type: 'POST',
            success: function(response) {
                window.location.search = '';
            }
        });
    }

</script>

<style>
    body {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .templates_list {
        width: 50%;
    }
    .fixed {
        position: fixed;
    }
    .textcenter {
        padding: 30px;
    }

</style>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <p class="navbar-text">Список шаблонов</p>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="{% url 'gap-admin:index' %}">в админку</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-lg-6 templates_list">
            <div class="list-group">
            {% for template in templates %}
                <a href="javascript:void(0);" class="list-group-item" id="{{ template.id }}" onclick="onTemplatesItemClick(this.id);"><h5 class="list-group-item-heading">{{ template.title }}</h5><span class="label label-info">{{ template.type}}</span></a>
            {% endfor %}
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-success fixed">
                <div class="panel-heading">Детали шаблона</div>
                <div class="panel-body">
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th>Поле</th>
                                <th>Значение</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td>ID:</td><td><span id="id">..</span></td></tr>
                            <tr><td>Название / title:</td><td><span id="title">..</span></td></tr>
                            <tr><td>Тип / type:</td><td><span id="type">..</span></td></tr>
                            <tr><td>Тег / tag:</td><td><span id="tag">..</span></td></tr>
                            <tr><td>Типы отсутствий / workflows:</td><td><span id="workflows">..</span></td></tr>
                            <tr><td>ID организаций / organization_ids:</td><td><span id="organization_ids">..</span></td></tr>
                            <tr><td>ID городов / city_ids:</td><td><span id="city_ids">..</span></td></tr>
                            <tr><td>Языки / langs:</td><td><span id="langs">..</span></td></tr>
                        </tbody>
                    </table>
                    <a href="javascript:void(0);" id="edit_button" class="btn btn-primary btn-warning">Изменить</a>
                    <a href="javascript:void(0);" onclick="removeTemplate();return false" id="remove_button" class="btn btn-primary btn-danger">Удалить</a>
                </div>
            </div>

        </div>
    </div>
</div>

{% endblock %}

