{% extends 'projector_index.html' %}

{% load add_class %}
{% load static %}

{% block title %}
    {{ title }} :: {{ block.super }}
{% endblock %}

{% block content %}
{#    {% include 'include/_breadcrumbs.html' %}#}

    <project_component class="w-100 ml-5" inline-template>
        <div class="col-12">
            <form method="post">
                {% csrf_token %}
                <div class="btn-toolbar mt-2" role="toolbar">
                    <div class="btn-group mr-2" role="group">
                        {% include 'include/save_button.html' with name="Сохранить" %}
                    </div>
                </div>
                <div class="mt-4">
                    <div class="form-group row">
                        <div class="col-sm-1 col-form-label">
                            <label for="{{ form.project_id.id_for_label }}">Ид проекта: </label>
                        </div>
                        <div class="col-sm-10">
                            {{ form.project_id|add_class:'form-control' }}
                        </div>
                        <div class="invalid-feedback d-block">
                            {{ form.project_id.errors }}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-1 col-form-label">
                            <label for="{{ form.name.id_for_label }}">Название: </label>
                        </div>
                        <div class="col-sm-10">
                            <input type="text" name="name" v-model="name" value="" maxlength="30"
                                   class=" form-control" id="id_name">
                        </div>
                        <div class="invalid-feedback d-block">
                            {{ form.name.errors }}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-1 col-form-label">
                            <label for="{{ form.type.id_for_label }}">Тип: </label>
                        </div>

                        <div class="col-sm-10">
                            <select name="type" id="id_type" class="form-control" v-model="type">
                                {% for t in types %}
                                    <option value="{{ t.0 }}" selected="selected">{{ t.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {#                        <div class="col-sm-10">#}
                        {#                            {{ form.type|add_class:'form-control' }}#}
                        {#                        </div>#}
                        <div class="invalid-feedback d-block">
                            {{ form.type.errors }}
                        </div>
                    </div>
                    <div class="form-group row ">
                        <div class="col-sm-1 col-form-label">
                            <label for="{{ form.connection_params.id_for_label }}">Данные подключения: </label>
                        </div>
                    </div>
                    <div class="form-group" v-if="type==='spread'">

                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="idhost">Хост: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" name="connection_params.host" v-model="connection_params.host"
                                       value="" maxlength="150"
                                       class=" form-control" id="idhost">
                            </div>
                            <div class="invalid-feedback d-block">
                                {| errors.host |}
                            </div>
                        </div>

                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="idport">Порт: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="number" name="connection_params.port" v-model="connection_params.port"
                                       value="" maxlength="30"
                                       class=" form-control" id="idport" required>
                            </div>
                        </div>

                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="idwebport">Вебпорт: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="number" name="connection_params.webport"
                                       v-model="connection_params.webport" pattern="\d*"
                                       value="" maxlength="30" class=" form-control" id="idwebport" required>
                            </div>
                        </div>

                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="idssl">SSL: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="checkbox" name="connection_params.ssl" v-model="connection_params.ssl"
                                       id="idssl" :value="true" :false-value="false" value="false">
                            </div>
                        </div>

                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="idlogin">Логин: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" name="connection_params.login" v-model="connection_params.login"
                                       value="" maxlength="30"
                                       class=" form-control" id="idlogin">
                            </div>
                        </div>

                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="idpassword">Пароль: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="password" name="connection_params.password"
                                       v-model="connection_params.password"
                                       value="" maxlength="30"
                                       class=" form-control" id="idpassword">
                            </div>
                        </div>
                    </div>

                    <div class="form-group" v-if="type==='cloud'">
                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="idcode">Код: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" name="connection_params.code" v-model="connection_params.code"
                                       value="" maxlength="30" pattern="\d{4}-\d{4}-\d{4}"
                                       placeholder="dddd-dddd-dddd"
                                       class=" form-control" id="idcode">
                            </div>
                        </div>
                    </div>
                    <div class="form-group" v-if="type==='custom'">
                        <div class="form-group row ">
                            <div class="col-sm-1 col-form-label">
                                <label for="iddata">Данные: </label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" name="connection_params.data" v-model="connection_params.data"
                                       value="" class=" form-control" id="iddata">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </project_component>
{% endblock %}

{% block script %}
    <script src='{% static "vue/project.js" %}'></script>
    <script src='{% static "vue/project_collector.js" %}'></script>
{% endblock %}