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

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

{% block more_css %}
    {% include "fittings/bundles/multi-select-css.html" %}
    {% include 'fittings/bundles/slim-select-css.html' %}

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

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

{% block fittings_block %}
    <div>
        <div class="card card-primary mb-3">
            <div class="card-header">
                <div class="card-title mb-0">{% translate "Edit Category" %}</div>
            </div>

            <div class="card-body">
                <form class="form" role="form" action="" method="POST">
                    {% csrf_token %}

                    <div class="row">
                        <div class="col-sm-10">
                            <div class="form-group mb-3">
                                <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 mb-3">
                                <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 mb-3">
                                <label for="groupSelect" style="margin-bottom: 0;">{% translate "Select Groups" %}</label>

                                <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>

                                <p class="text-muted small">
                                    {% 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." %}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group mb-3">
                                <label for="fitSelect">{% translate "Select Fittings" %}</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 mb-3">
                                <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>

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

{% block extra_javascript %}
    {% include 'fittings/bundles/slim-select-js.html' %}

    {% translate "Select Value" as l10nSelectValue %}
    {% translate "No Results" as l10nNoResults %}
    {% translate "Search" as l10nSearch %}

    <script>
        const color_picker = document.getElementById('color');
        const color_picker_wrapper = document.getElementById('color-wrapper');

        color_picker_wrapper.style.backgroundColor = color_picker.value;
        color_picker.addEventListener('change', function() {
            color_picker_wrapper.style.backgroundColor = color_picker.value;
        });

        ['#groupSelect', '#fitSelect', '#docSelect'].forEach(selector => {
            new SlimSelect({
                select: selector,
                hideSelectedOption: true,
                placeholder: '{{ l10nSelectValue|escapejs }}',
                searchText: '{{ l10nNoResults|escapejs }}',
                searchPlaceholder: '{{ l10nSearch|escapejs }}'
            });
        });
    </script>
{% endblock %}
