{% extends 'fittings/base.html' %}

{% load i18n %}
{% load humanize %}
{% load filters %}
{% load static %}
{% load evelinks %}

{% block more_css %}
    <link rel="stylesheet" href="{% static 'tnnt_templates/libs/multi-select/0.9.12/css/multi-select.min.css' %}" />

    <style type="text/css">
        .ms-container {
            width: 100% !important;
        }
    </style>
{% endblock %}

{% block page_title %}{% translate "Edit Doctrine" %}{% endblock %}

{% block fittings_block %}
    {% if msg %}
        <div class="alert alert-{{ msg.0 }} alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times</span>
            </button>
            <h4>
                {% if msg.0 == 'danger' %}
                    {% translate "Oh No!" %}
                {% elif msg.0 == 'success' %}
                    {% translate "Success!" %}
                {% endif %}
            </h4>
            <p>{{ msg.1 }}</p>
        </div>
    {% endif %}

    <div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">{% translate "New Doctrine" %}</div>
            </div>

            <div class="panel-body">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <form class="form-signin" role="form" action="" method="POST">
                            {% csrf_token %}

                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">{% translate "Doctrine Name" %}</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="name" id="name" value="{{ doctrine.name }}" required/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="description" class="col-sm-2 control-label">{% translate "Doctrine Description" %}</label>

                                <div class="col-sm-10">
                                    <textarea class="form-control" name="description" id="description" rows="4">{{ doctrine.description }}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="fitSelect" class="col-sm-2 control-label">{% translate "Select Fits" %}</label>

                                <div class="col-sm-10" style="margin-top: 5px; margin-bottom: 5px;">
                                    <select multiple="multiple" id="fitSelect" name="fitSelect">
                                        {% for fit in doc_fits %}
                                            <option value="{{ fit.pk }}" selected>{{ fit.name }} ({{ fit.ship_type.type_name }})</option>
                                        {% endfor %}
                                        {% for fit in fits %}
                                            <option value="{{ fit.pk }}">{{ fit.name }} ({{fit.ship_type.type_name}})</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="iconSelect" class="col-sm-2 control-label">{% translate "Select Doctrine Icon" %}</label>

                                <div class="col-sm-10">
                                    <select class="form-control" name="iconSelect" id="iconSelect" aria-describedby="helpBlock">
                                        <option value="{{ doctrine.icon_url }}" selected> {% translate "Current Icon" %} </option>
                                        {% for ship in ships %}
                                            <option value="{{ ship.ship_type|type_render_url:64 }}">{{ship.ship_type__type_name}}</option>
                                        {% endfor %}
                                    </select>
                                    <span id="helpBlock" class="help-block"> {% translate "If you do not see the ship type that you would like to use for the icon, add a fit that uses that ship type and try again." %}</span>
                                </div>
                            </div>

                            <br />
                            <button class="btn btn-primary btn-block" type="submit">{% translate "Submit" %}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    <script type="application/javascript" src="{% static 'tnnt_templates/libs/multi-select/0.9.12/js/jquery.multi-select.min.js' %}"></script>
    <script type="application/javascript" src="{% static 'tnnt_templates/libs/quicksearch/2.4.0/dist/jquery.quicksearch.min.js' %}"></script>

    <script type="application/javascript">
        $('#fitSelect').multiSelect({
            selectableHeader: "<input type='text' class='form-control' autocomplete='off' placeholder='Search' style='margin-bottom: 3px;'>",
            selectionHeader: "<input type='text' class='form-control' autocomplete='off' placeholder='Search' style='margin-bottom: 3px;'>",
            afterInit: function(ms) {
                let that = this,
                    $selectableSearch = that.$selectableUl.prev(),
                    $selectionSearch = that.$selectionUl.prev(),
                    selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                    selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

                that.qs1 = $selectableSearch.quicksearch(selectableSearchString) .on('keydown', function(e) {
                    if (e.which === 40){
                        that.$selectableUl.focus();

                        return false;
                    }
                });

                that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on('keydown', function(e) {
                    if (e.which == 40){
                        that.$selectionUl.focus();

                        return false;
                    }
                });
            },
            afterSelect: function() {
                this.qs1.cache();
                this.qs2.cache();
            },
            afterDeselect: function() {
                this.qs1.cache();
                this.qs2.cache();
            }
        });
    </script>
{% endblock %}
