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

{% block more_css %}
    {% include "fittings/bundles/multi-select-css.html" %}
    <style>
        .form-control {
            margin: 2px;
        }

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

        input[type="color"] {
            opacity: 0;
            display: block;
            border: none;
            height:100%;
            width: 100%;
        }
    </style>

    {% include 'fittings/bundles/slim-select-css.html' %}

{% endblock %}

{% block page_title %}{% translate "Add Category" %}{% endblock %}

{% block fittings_block %}
    <div class="container col-sm-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                {% translate "New Category" %}
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <form class="form" role="form" action="" method="POST">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-sm-10">
                                    <div class="form-group">
                                        <label for="name">{% translate "Category Name" %}</label>
                                        <input type="text" class="form-control" name="name" id="name" required>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label for="color">{% translate "Category Color" %}</label>
                                        <div class="form-control col-sm-1" id="color-wrapper" style="padding:0 !important;">
                                            <input type="color" name="color" id="color" value="#39CCCC" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="groupSelect" style="margin-bottom: 0;">{% translate "Select Groups" %}</label>
                                        <span class="help-block" style="margin-top: 0; margin-bottom: 0; font-size: 10pt; font-style: italic;">{% translate "Only selected groups will have access to fittings and doctrines in this category. If no groups are selected the category will be visible to all with fittings module access." %}</span>
                                        <select name="groupSelect" id="groupSelect" multiple>
                                            {% for group in groups %}
                                            <option value="{{group.pk}}">{{group.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="fitSelect">{% translate "Select Fits" %}</label>
                                        <select name="fitSelect" id="fitSelect" multiple>
                                            {% for fit in fits %}
                                            <option value="{{fit.pk}}">{{fit.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="docSelect">{% translate "Select Doctrines" %}</label>
                                        <select name="docSelect" id="docSelect" multiple>
                                            {% for doc in docs %}
                                            <option value="{{doc.pk}}">{{doc.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </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/slim-select-js.html' %}
{% endblock %}


{% block extra_script %}
var color_picker = document.getElementById("color");
var color_picker_wrapper = document.getElementById("color-wrapper");
color_picker.onchange = function() {
	color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;

new SlimSelect({
    select: "#groupSelect",
    hideSelectedOption: true,
    placeholder: '{% translate "Select Value" %}',
    searchText: '{% translate "No Results" %}',
    searchPlaceholder: '{% translate "Search" %}'
});

new SlimSelect({
    select: "#fitSelect",
    hideSelectedOption: true,
    placeholder: '{% translate "Select Value" %}',
    searchText: '{% translate "No Results" %}',
    searchPlaceholder: '{% translate "Search" %}'
});

new SlimSelect({
    select: "#docSelect",
    hideSelectedOption: true,
    placeholder: '{% translate "Select Value" %}',
    searchText: '{% translate "No Results" %}',
    searchPlaceholder: '{% translate "Search" %}'
});

{% endblock %}
