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

{% block more_css %}
    {% include 'fittings/bundles/multi-select-css.html' %}
    <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' %}Oh No!{% elif msg.0 == 'success' %}Success!{% endif %}</h4>{% endif %}
                    <p>{{ msg.1 }}</p>
                </div>
        {% endif %}
    <div class="container col-sm-12">
        <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.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__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 %}
    {% include 'fittings/bundles/multi-select-js.html' %}
    {% include 'fittings/bundles/jquery.quicksearch-js.html' %}
{% endblock %}

{% block extra_script %}
    $('#fitSelect').multiSelect({
          selectableHeader: "<input type='text' class='form-control' autocomplete='off' placeholder='{% translate "Search" %}' style='margin-bottom: 3px;'>",
          selectionHeader: "<input type='text' class='form-control' autocomplete='off' placeholder='{% translate "Search" %}' style='margin-bottom: 3px;'>",
          afterInit: function(ms){
            var 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();
          }
        })
{% endblock %}