{% extends "base.html" %}


{% block title %}Создание заявки{% endblock %}

{% block script %}
    <script type="text/javascript">
        NAMESPACE_CONSUMERS = {{ namespace_consumers|safe }};
        ISSUE = {{ issue|safe }};
        EDITABLE_NAMESPACES = {{ editable_namespaces|safe }};
    </script>
    {{ block.super }}
{% endblock %}

{% block content %}
    {% verbatim %}
    <article class="container" ng-controller="CreateIssueCtrl">
        <datalist id="network_list">
        </datalist>

        <div class="btn-group">
            <button class="btn"
                    ng-class="{active: type == create}"
                    ng-click="toggleType(create)"
                    ng-disabled="id && !(type == create)">
                Создать потребителя
            </button>
            <button class="btn"
                    ng-class="{active: type == clone}"
                    ng-click="toggleType(clone)"
                    ng-disabled="id && !(type == clone)">
                Клонировать потребителя
            </button>
            <button class="btn"
                    ng-class="{active: type == modify}"
                    ng-click="toggleType(modify)"
                    ng-disabled="id && !(type == modify)">
                Изменить потребителя
            </button>
            <button class="btn"
                    ng-class="{active: type == set_expiration}"
                    ng-click="toggleType(set_expiration)"
                    ng-disabled="id && !(type == set_expiration)">
                Временные гранты
            </button>
        </div>

        <label>
            <h4>Проект:</h4>
            <select ng-model="namespace" ng-change="loadConsumer()"
                    ng-options="n as n.name for n in namespace_consumers"></select>
        </label>

        <p id="not_editable" class="alert">
            Мы убрали возможность создания заявки на гранты в Blackbox (ЧЯ) через Грантушку.
            Для запроса новых или изменения старых грантов воспользуйтесь <a href="https://forms.yandex-team.ru/surveys/4901/">формой</a>
        </p>

        <div id="editable">
            <h4>
                <label style="display: inline-block">
                    <div ng-if="[clone, modify, set_expiration].indexOf(type) >= 0">
                        <h4>Выбрать потребителя по макросу/сети/хосту/IP или его имени:
                            <img ng-if="loading_consumer" src="/static/ajax-loader.gif">
                        </h4>
                        <div style="display: flex; align-items: flex-start">
                            <input style="margin-right: 20px;" list="consumers" type="text" placeholder="макрос, сеть, хост, IP или имя"
                               ng-model="$parent.consumer_name" ng-change="loadConsumer()"
                               typeahead="suggestion.name for suggestion in suggestConsumer($viewValue)"
                               typeahead-template-url="suggestion.html"
                               typeahead-on-select="selectConsumerSuggest($item)"
                               typeahead-wait-ms="100">
                            <div ng-if="info">
                                <div class="info">{{ info }}</div>
                            </div>
                        </div>
                    </div>
                    <div ng-if="type == create">
                        <h4>Потребитель:
                            <img ng-if="loading_consumer" src="/static/ajax-loader.gif"></h4>
                        <input list="consumers" type="text" placeholder="имя"
                               ng-model="$parent.consumer_name" ng-change="loadConsumer()">
                    </div>

                </label>

                <script type="text/ng-template" id="suggestion.html">
                    <span class="dropdown-item muted" ng-if="match.model.group">{{ match.model.group }}</span>
                    <a>{{ match.label }} <span class="muted">{{ match.model.description }}</span></a>
                </script>

                <label style="display: inline-block" class="linkish checkbox" ng-if="type == modify && !_change_name">
                    сменить имя...
                    <input type="checkbox" class="hide" ng-model="$parent._change_name">
                </label>
                <input type="text" placeholder="новое имя"
                       ng-model="$parent.consumer_name_new" ng-if="_change_name && type == modify || type == clone"><br>
                <input type="text" placeholder="описание потребителя"
                       ng-class="{add: consumer_description != consumer_description_new}"
                       ng-model="consumer_description_new">
            </h4>

            <span class="alert" ng-if="consumer_exists && type == create">такой потребитель уже существует</span>
            <div ng-if="error">
                <span class="alert" style="white-space: pre">{{ error }}</span>
            </div>

            <form class="form-inline">
                <h4>Окружения:</h4>
                <label class="checkbox inline" ng-repeat="environment in namespace.environments" >
                    <input type="checkbox" name="environment" ng-model="environment.active" ng-click="toggleEnvironment(environment)"> {{ environment.description }}
                </label>
                <button class="btn" title="сделать гранты в выбранных окружениях одинаковыми"
                        ng-if="unsynced() && type != set_expiration"
                        ng-click="sync()">синхронизировать</button>
            </form>

            <div class="input-append pull-right" ng-if="consumer_grants">
                <input type="text" placeholder="фильтр" ng-model="$parent.filter_key" ng-change="filter()">
                <button class="btn" type="button" ng-click="$parent.filter_key = ''; filter()">⨯</button>
            </div><br>

            <h4 ng-if="consumer_grants.grants">Гранты:</h4>
            <div ng-if="type == set_expiration">
                Дата истечения срока действия грантов
                <input type="text" id="expiration" class="input-medium" placeholder=""
                       ng-model="$parent.expiration_date" data-date-format="dd.mm.yyyy" data-date="">
                <br>
            </div>

            <!-- гранты -->
            <ul class="grant_columns row">
                <li ng-repeat="grant in consumer_grants.grants"
                    class="tile foldable folded highlightable"
                    data-id="{{ grant.name }}"
                    ng-class="grant._unfolded && 'block' || actionsChanged(grant)">
                    <input type="checkbox" class="folding_switch" id="Action_gr_{{ grant.actions[0].id }}_switch"
                           ng-model="grant._unfolded" ng-if="grant.actions[0].name != '*'" />
                    <div class="tile_widget" title="{{ grant.name }}">
                        <!-- грант.* -->
                        <span title="{{ grant.name }}"
                              ng-if="grant.actions[0].name == '*'"
                              ng-bind="grant.name | limitTo: 23"></span>

                        <!-- грант.действие -->
                        <label class="tile_label" for="Action_gr_{{ grant.actions[0].id }}_switch" title="{{ grant.name }}"
                               ng-bind="grant.name | limitTo: 23"
                               ng-if="grant.actions[0].name != '*'"></label>

                        <input class="pull-right" type="checkbox"
                               ng-model="grant.active_new"
                               ng-indeterminate="grant.indeterminate_new"
                               ng-disabled="type == set_expiration" />

                        <span class="pull-right" title="{{ grant.expiration_new }}"
                              ng-if="grant.expiration_new && type != set_expiration"><i class="icon-time"></i></span>
                        <span class="pull-right linkish" title="{{ grant.expiration_new }}"
                              ng-if="type == set_expiration"
                              ng-click="setGrantExpiration(grant)">{{ grant.expiration_new && '⌚' || '∞' }}</span>
                        <span class="pull-right" title="Dangerous operation grant"
                              ng-if="every(grant.actions, 'dangerous')"><i class="icon-fire"></i></span>
                    </div>

                    <!-- действия -->
                    <label class="tile enfoldable highlightable" data-id="{{ action.name }}" title="{{ action.description }}"
                           ng-class="{remove: action.remove, add: action.add, change: action.change}"
                           ng-repeat="action in grant.actions"
                           ng-if="action.name != '*'"
                           ng-click="type == set_expiration && setExpiration(action)">
                        {{ action.name | limitTo: 24}}
                        <input type="checkbox" class="pull-right"
                               ng-model="action.active_new"
                               ng-indeterminate="action.indeterminate_new"
                               g-three-click="action"
                               ng-disabled="type == set_expiration" />
                        <span class="pull-right" title="{{ action.expiration_new }}"
                              ng-if="type != set_expiration && action.expiration_new"><i class="icon-time"></i></span>
                        <span class="pull-right linkish" title="{{ action.expiration_new }}"
                              ng-if="type == set_expiration">
                            {{ action.expiration_new && '⌚' || '∞' }}
                        </span>
                        <span class="pull-right"
                              ng-if="action.dangerous" title="Dangerous operation grant"><i class="icon-fire"></i></span>
                    </label>
                </li>
            </ul>


            <!-- макросы -->
            <h4 ng-if="consumer_grants.macroses">Группы грантов:</h4>
            <div class="tile foldable folded highlightable" data-id="{{ macros.name }}" title="{{ macros.description }}"
                 ng-repeat="macros in consumer_grants.macroses"
                 ng-class="{remove: macros.remove, add: macros.add, block: macros._unfolded}">
                <input type="checkbox" class="folding_switch" id="Macros_{{ macros.id }}_switch"
                       ng-model="macros._unfolded" />
                <div class="tile_widget">
                    <label class="tile_label" for="Macros_{{ macros.id }}_switch" title="{{ macros.description }}">{{ macros.name | limitTo: 26 }}</label>
                    <input class="pull-right" type="checkbox"
                           ng-model="macros.active_new"
                           ng-indeterminate="macros.indeterminate_new"
                           g-three-click="macros"
                           ng-disabled="type == set_expiration" />
                    <span class="pull-right" title="{{ macros.expiration_new }}"
                          ng-if="type != set_expiration && macros.expiration_new"><i class="icon-time"></i></span>
                    <span class="pull-right linkish" title="{{ macros.expiration_new }}"
                          ng-if="type == set_expiration" ng-click="setExpiration(macros)">
                        {{ macros.expiration_new && '⌚' || '∞' }}
                    </span>
                    <span class="pull-right" title="Dangerous operation grant"
                          ng-if="macros.dangerous"><i class="icon-fire"></i></span>
                </div>
                <span class="tag enfoldable grant" ng-repeat="grant in macros.grants"  title="{{ grant.description }}">
                    {{ grant.name }}
                    <span class="tag action" ng-repeat="action in grant.actions" title="{{ action.description }}">
                        {{ action.name }}
                    </span>
                </span>
            </div>

            <br/>
            <br/>

            <section ng-if="consumer_grants.networks && type != set_expiration">
                <div ng-if="network_error">
                    <div class="alert" style="white-space: pre;">{{ network_error }}</div>
                </div>
                <h4>Сети:</h4>
                <div ng-repeat="environment in namespace.environments" ng-if="environment.active">
                    для {{ environment.description }}:
                    <form class="input-append pull-right" ng-submit="addNetwork(environment)" ng-if="consumer_grants">
                        <div class="dropdown-menu-scrollable">
                            <input type="text" placeholder="сеть для {{ environment.description }}" list="network_list"
                                   ng-model="environment.network_input"
                                   typeahead="suggestion for suggestion in suggestNetwork($viewValue)"
                                   typeahead-wait-ms="300">
                            <button class="btn" type="button" ng-click="addNetwork(environment)">добавить</button>
                            <button class="btn" type="button" ng-click="clearNetworks(environment)">отозвать все</button>
                        </div>
                    </form>

                    <br><br>

                    <div class="tile highlightable" data-id="{{ network.string }}"
                         ng-repeat="network in consumer_grants.networks[environment.id]"
                         ng-class="{remove: network.active && !network.active_new, add: network.active_new && !network.active }">
                        <label class="tile_label tile_widget" ng-class="{long: network.string.length > 22}">
                            {{ network.string }}
                            <input class="pull-right" type="checkbox"  ng-model="network.active_new">
                        </label>
                    </div>
                    <br><br>
                </div>
            </section>

            <section ng-if="namespace.by_client && type != set_expiration">
                <div ng-if="client_error">
                    <div class="alert" style="white-space: pre;">{{ client_error }}</div>
                </div>
                <h4>Client Id:</h4>
                <div ng-repeat="environment in namespace.environments" ng-if="environment.active"
                     style="margin-bottom: 20px; display: flex; justify-content: space-between;">
                    <div>для {{ environment.description }}:</div>
                    <form ng-show="!environment.client_id" ng-submit="addClient(environment)">
                        <input type="text"
                               placeholder="client_id"
                               ng-model="environment.client_id_input">
                        <input type="text"
                               placeholder="name"
                               ng-model="environment.client_name_input">
                        <button class="btn" style="vertical-align: top"
                                type="button"
                                ng-click="addClient(environment)">Добавить</button>
                    </form>

                    <div ng-show="environment.client_id" ng-model="environment.client_id">
                        <span class="uneditable-input">{{ environment.client_id }}</span>
                        <span class="uneditable-input">{{ environment.client_name }}</span>
                        <button ng-show="environment.client_editable" style="vertical-align: top" class="btn" type="button" ng-click="deleteClient(environment)">Удалить</button>
                        <button ng-show="!environment.client_editable" style="vertical-align: top" class="btn" type="button" ng-click="clearClient(environment)">Очистить</button>
                    </div>
                </div>
            </section>

            <section>
                <div ng-if="page_down_error" class="alert">
                    <span style="white-space: pre-wrap; line-height: 2">{{ page_down_error }}</span>
                </div>
                <div>
                    <h4>Комментарий к заявке:</h4>
                    <textarea class="span12" id="id_comment" rows="10" ng-model="comment" placeholder="Комментарий к заявке обязателен" required></textarea>
                </div>
                <div>
                    <h5>Кому еще отправить уведомление о том, что грантами можно пользоваться:</h5>
                    <div ng-repeat="email in emails">
                        <input ng-model="email.address" placeholder="Add email" type="text"/>
                        <button class="btn margin-bottom-10" type="button" ng-click="deleteEmail(email)">Удалить</button>
                    </div>
                    <button class="btn" type="button" ng-click="addEmail()">Добавить</button>
                </div>

                <div class="pull-right">
                    <button class="btn btn-primary"
                            ng-if="!sending_form && consumer_grants.grants"
                            ng-click="submitIssue()">Отправить заявку</button>
                    <button class="btn"
                            ng-if="!sending_form && consumer_grants.grants"
                            ng-click="submitIssue(true)">Сохранить как черновик</button>
                </div>
            </section>
        </div>

    </article>
    {% endverbatim %}
{% endblock %}