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

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

{% block more_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'tnnt_templates/libs/slim-select/1.26.0/dist/slimselect.min.css' %}">

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

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

{% block fittings_block %}
    <div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">{% translate "Edit Category" %}</div>
            </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" value="{{cat.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="{{cat.color}}" 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}}" {% if group in cat.groups.all %} selected {%endif%}>{{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}}" {% if fit in cat.fittings.all %} selected {% endif %}>{{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}}" {% if doc in cat.doctrines.all %} selected {% endif %}>{{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 %}
    <script type="application/javascript" src="{% static 'tnnt_templates/libs/slim-select/1.26.0/dist/slimselect.min.js' %}"></script>

    <script type="application/javascript">
        let color_picker = document.getElementById("color");
        let 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
        });

        new SlimSelect({select: "#fitSelect", hideSelectedOption: true});
        new SlimSelect({select: "#docSelect", hideSelectedOption: true});
    </script>
{% endblock %}
