{% extends 'projector_index.html' %}
{% load add_class %}
{% load static %}
{% block title %}
    {{ title }} :: {{ block.super }}
{% endblock %}
{% block content %}
    <projector_component class="w-100 ml-5" inline-template>
        <div class="container-fluid">
            <div class="row">
                <div class="col-6 col-sm-4 mt-5">
                    <h3 class="text-center">
                        Настройки
                    </h3>
                </div>
                <div class="w-100 d-none d-md-block"></div>
                <div class="col-6 col-sm-4 mt-2">
                    <form method="post" id="loginForm">
                        {% csrf_token %}
                        <div class="form-group row ">
                            <label for="inputName">Главный сервер авторизации</label>
                            <input class="form-control {% if form.main.errors %}is-invalid{% endif %}" v-model="main"
                                   id="inputName" name="main"/>
                            {% if form.main.errors %}
                                <div class="invalid-feedback">
                                    {{ form.main.errors }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-1 col-form-label">
                                <label for="{{ form.username.id_for_label }}">Логин: </label>
                            </div>
                            <div class="col-sm">
                                {% if form.username.errors %}
                                    {{ form.username|add_class:'form-control is-invalid' }}
                                {% else %}
                                    {{ form.username|add_class:'form-control' }}
                                {% endif %}
                                {% if form.username.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.username.errors }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-1 col-form-label">
                                <label for="{{ form.password.id_for_label }}">Пароль: </label>
                            </div>
                            <div class="col-sm">
                                {{ form.password|add_class:'form-control' }}
                                {% if form.password.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.password.errors }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <button type="submit" class="btn btn-outline-success d-block mx-auto">Login</button>
                    </form>
                    <div class="w-100 d-none d-md-block"></div>
                    <hr class="mt-4">
                    <div class="row">
                        <div class="col-auto mt-2">
                            <button v-on:click="loadEQ" class="btn btn-dark d-block float-left">Загрузить EQ</button>
                        </div>
                        {#                    </div>#}
                        {#                    <div class="row">#}
                        <div class="col-auto mt-2">
                            <button v-on:click="createSupervisorConfig" class="btn btn-dark d-block float-left">Создать
                                конфиг
                            </button>
                        </div>
                        {#                    </div>#}
                        {#                    <div class="row">#}
                        <div class="col-auto mt-2">
                            <button v-on:click="send" class="btn btn-dark d-block float-left">Send</button>
                        </div>
                    </div>
                    {#            <div class="row">#}
                    {#                <input v-model="user.first_name"/>#}
                    {#                <button v-on:click="greet">ТЫК</button>#}
                    {#            </div>#}
                    {#            <div class="row">#}
                    {#                <div class="col-md-6">#}

                    <div class="row">
                        <button v-on:click="saveOptions" class="btn btn-success d-block float-left mt-5">Сохранить
                            настройки
                        </button>
                    </div>
                    <div class="w-100 d-none d-md-block"></div>
                    <hr class="mt-4">
                    <div class="row">
                        <div class="form-group">
                            <label for="client">Клиенты сервера авторизации</label>
                            <ul id="client">
                                <li v-for="(item, index) in socks" :key="index" class="mt-1">
                                    {| item |}
                                    {#                                    <input class="form-control" v-model="item.value"/>#}
                                </li>
                            </ul>
                        </div>
                        {#                        <button v-on:click="add" class="btn btn-success d-block float-left">Добавить</button>#}
                    </div>
                </div>
                {#    <div class="container-fluid">#}
                {#        <div class="row">#}
                {#            <div class="col-6 col-sm-4 mt-5">#}
                {#                <h3 class="text-center">#}
                {#                    Настройки#}
                {#                </h3>#}
                {#            </div>#}
                {#            <div class="w-100 d-none d-md-block"></div>#}
                {#            <div class="col-6 col-sm-4 mt-2">#}
                {#                <div class="form-group">#}
                {#                    <label for="inputName">Главный сервер авторизации</label>#}
                {#                    <input class="form-control" v-model="main" id="inputName" name="main"/>#}
                {#                </div>#}
                {#            </div>#}
                {#            <div class="w-100 d-none d-md-block"></div>#}
                {##}
                {#            <div class="col-6 col-sm-4 mt-2">#}
                {#                {% include 'include/_login_form.html' %}#}
                {#            </div>#}
                {#        </div>#}
                {#        <div class="w-100 d-none d-md-block"></div>#}
                {#        <hr class="mt-4">#}
                {#        <div class="row">#}
                {#            <div class="col-md-6 mt-2">#}
                {#                <button v-on:click="loadEQ" class="btn btn-dark d-block float-left">Загрузить EQ</button>#}
                {#            </div>#}
                {#        </div>#}
                {#        <div class="row">#}
                {#            <div class="col-md-6 mt-2">#}
                {#                <button v-on:click="createSupervisorConfig" class="btn btn-dark d-block float-left">Создать конфиг#}
                {#                </button>#}
                {#            </div>#}
                {#        </div>#}
                {#        <div class="row">#}
                {#            <div class="col-md-6 mt-2">#}
                {#                <button v-on:click="send" class="btn btn-dark d-block float-left">Send</button>#}
                {#            </div>#}
                {#        </div>#}
                {#            <div class="row">#}
                {#                <input v-model="user.first_name"/>#}
                {#                <button v-on:click="greet">ТЫК</button>#}
                {#            </div>#}
                {#            <div class="row">#}
                {#                <div class="col-md-6">#}
                {#        <button v-on:click="saveOptions" class="btn btn-success d-block float-left mt-5">Сохранить настройки#}
                {#        </button>#}
                {##}
                {#    </div>#}
            </div>
        </div>
    </projector_component>
{#    <script src="{% static 'vue/projector.js' %}"></script>#}
{#    {% include 'include/footer.html' %}#}
{% endblock %}
{% block script %}
    <script src='{% static "vue/projector.js" %}'></script>
    <script src='{% static "vue/projector_collector.js" %}'></script>
{% endblock %}