{% extends 'fittings/base.html' %}
{% load i18n %}
{% load humanize %}
{% load filters %}
{% load static %}
{% load evelinks %}

{% block more_css %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.min.css" />
    <style>
        .form-control {
            margin: 2px;
        }

        .ms-container {
            width: 100% !important;
        }

    </style>

{% endblock %}

{% block page_title %}{% translate "Add 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>

            {% if msg.0 != 'warning' %}
                <h4>
                    {% if msg.0 == 'danger' %}
                        {% translate "Oh No!" %}
                    {% elif msg.0 == 'success' %}
                        {% translate "Success!" %}
                    {% endif %}
                </h4>
            {% endif %}

            <p>{{ msg.1 }}</p>
        </div>
    {% endif %}

    <div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                {% translate "New Doctrine" %}
            </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" 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"></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 fittings %}
                                            <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">
                                        {% 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="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js" integrity="sha256-JU2QMhOvXGZtWxxkQTEgpVjdPHMYMuVYbYzNqfsioNw=" crossorigin="anonymous"></script>
    <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.4.0/jquery.quicksearch.min.js" integrity="sha256-hD1kpQcVntR40eMx9uED+E4HAjD2OJkLIFcP6ukVd+g=" crossorigin="anonymous"></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 %}
