{% extends 'layout/admin.twig' %}

{% block header %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>
    <script src="/js/sharedScript.js"></script>
{% endblock %}

{% block body %}
    <div class="ui segment">
        <h1>{{ t("admin.editBundleProperties.editBundle") }}</h1>
        <div class="ui info icon message">
            <i class="info icon"></i>
            <div class="content">
                <p>{{ t("admin.editBundleProperties.msg1") }}</p>
            </div>
        </div>
        <form action="/admin/edit/bundleProperties" method="post" enctype="multipart/form-data" class="ui form">
            <input type="text" name="bundle" value="{{ bundle }}" hidden/>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.name") }}</label>
                <input type="text" value="{{ bundleData.displayName }}" name="displayName"/>
            </div>
            <div class="field">
                <label>{{ t("admin.editBundleProperties.background") }}</label>
                <select name="background">
                    {% for image in backgroundImages %}
                        <option value="{{ image }}" {% if image == bundleData.background %} selected {% endif %}>{{ image }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="field">
                <div class="ui action input">
                    <input type="file" name="newBackground"/>
                    <button class="ui info button" type="submit" name="sUpload" value="true">{{ t("actions.upload") }}</button>
                </div>
            </div>
            <div class="field">
                <label>{{ t("admin.editBundleProperties.transition") }}</label>
                <div id="transitions" class="ui selection scrolling dropdown">
                    <input type="text" id="inputTransition" name="transition" value="{{ bundleData.transition }}" hidden/>
                    <div class="ui small breadcrumb">
                        <span id="currentTransition" class="section"></span>
                    </div>
                    <i class="dropdown icon"></i>
                </div>
            </div>
            <div class="field">
                <div id="displayTime" class="ui toggle {% if bundleData.displayTime %} checked {% endif %} checkbox">
                    <input type="checkbox" {% if bundleData.displayTime %} checked {% endif %} name="displayTime"/>
                    <label>{{ t("admin.editBundleProperties.time") }}</label>
                </div>
            </div>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.duration") }}</label>
                <input type="number" value="{{ bundleData.duration }}" name="duration"/>
            </div>
            <div class="ui info icon message">
                <i class="warning icon"></i>
                <div class="content">
                    <div class="header">
                        {{ t("admin.editBundleProperties.msg2title") }}
                    </div>
                    <p>  {{ t("admin.editBundleProperties.msg2body") }}</p>
                </div>
            </div>
            <div class="field">
                <div id="webfonts" class="ui toggle {% if bundleData.useWebFonts %} checked {% endif %} checkbox">
                    <input type="checkbox" {% if bundleData.useWebFonts %} checked {% endif %} name="useWebFonts"/>
                    <label>{{ t("admin.editBundleProperties.webfonts") }}</label>
                </div>
            </div>


            <h1>{{ t("admin.editBundleProperties.style") }}</h1>
            <div class="ui negative icon message">
                <i class="warning icon"></i>
                <div class="content">
                    <div class="header">
                        {{ t("admin.editBundleProperties.msg3title") }}
                    </div>
                    <p>
                        {{ t("admin.editBundleProperties.msg3body") }}
                    </p>
                </div>
            </div>

            <h2>  {{ t("admin.editBundleProperties.header") }}</h2>

            <div class="field">
                <label> {{ t("admin.editBundleProperties.fontName") }}</label>
                <input type="text" value="{{ bundleData.styleHeader.fontFamily }}" name="headerFontFamily"/>
            </div>
            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontWeight") }}</label>
                <input type="number" value="{{ bundleData.styleHeader.fontWeight }}" name="headerFontWeight"/>
            </div>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontSize") }}</label>
                <input type="number" value="{{ bundleData.styleHeader.fontSize }}" name="headerFontSize"/>
            </div>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontColor") }}</label>
                <input id="headerFill" type="text" value="{{ bundleData.styleHeader.fill }}" name="headerFill"
                       onchange="previewColor(this)"/>
            </div>
            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontBorder") }}</label>
                <input id="headerStroke" type="text" value="{{ bundleData.styleHeader.stroke }}" name="headerStroke"
                       onchange="previewColor(this)"/>
            </div>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontBorderWidth") }}</label>
                <input type="number" value="{{ bundleData.styleHeader.strokeWidth }}" name="headerStrokeSize"/>
            </div>

            <h2> {{ t("admin.editBundleProperties.text") }}</h2>

            <div class="field">
                <label> {{ t("admin.editBundleProperties.fontName") }}</label>
                <input type="text" value="{{ bundleData.styleText.fontFamily }}" name="textFontFamily"/>
            </div>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontWeight") }}</label>
                <input type="number" value="{{ bundleData.styleText.fontWeight }}" name="textFontWeight"/>
            </div>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontSize") }}</label>
                <input type="number" value="{{ bundleData.styleText.fontSize }}" name="textFontSize"/>
            </div>
            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontColor") }}</label>
                <input id="textFill" type="text" value="{{ bundleData.styleText.fill }}" name="textFill"
                       onchange="previewColor(this)"/>
            </div>
            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontBorder") }}</label>
                <input id="textStroke" type="text" value="{{ bundleData.styleText.stroke }}" name="textStroke"
                       onchange="previewColor(this)"/>
            </div>

            <div class="field">
                <label>{{ t("admin.editBundleProperties.fontBorderWidth") }}</label>
                <input type="number" value="{{ bundleData.styleText.strokeWidth }}" name="textStrokeSize"/>
            </div>

            <div class="field">
                <button name="sNormal" value="true" type="submit" class="ui green button">{{ t("actions.save") }}</button>
            </div>
        </form>
        <br>

        <form action="/admin/delete/bundle" method="post" enctype="multipart/form-data" class="ui form">
            <input type="text" name="bundle" value="{{ bundle }}" hidden/>
            <div class="field">
                <button name="sDelete" value="true" type="submit" class="ui red button" onclick="return confirm('{{ t("admin.editBundleProperties.deleteBundle") }}');">{{ t("actions.delete") }}</button>
            </div>
        </form>
    </div>

    <script>

        $(function () {

            var transitionArray = [];
          //  var values = ["bars", "blinds", "blinds3d", "zip", "blocks", "blocks2", "concentric", "warp", "cube", "tiles3d", "tiles3dprev", "slide", "swipe", "dissolve"];
            transitionArray.push({name: "random", value: ""});
            for (var i in SupportedTransitions) {
                transitionArray.push({name: SupportedTransitions[i], value: SupportedTransitions[i]});
            }

            $('#transitions')
                .dropdown({
                    direction: "downward",
                    values: transitionArray,
                    action: function (text, value) {
                        $('#transitions').dropdown("hide");
                        $('#transitions').dropdown("set selected", value);

                        $('#inputTransition').val(value);

                        $('#currentTransition').text(text);

                    }
                }).dropdown("set selected", "{{ bundleData.transition }}");

            $('#currentTransition').text("{{ bundleData.transition }}");

            $(".checkbox").checkbox();


            previewColor($("#headerFill"));
            previewColor($("#headerStroke"));
            previewColor($("#textFill"));
            previewColor($("#textStroke"));
        });

        function previewColor(element) {
            $(element).css("background", $(element).val());
        }

    </script>
{% endblock %}