{% extends 'categories/management/full_width_base.html' if category|default(none) else 'events/management/full_width_base.html' %}

{% from 'message_box.html' import message_box %}

{% block title %}
    {% trans %}Poster and Badge Designer{% endtrans %}
{% endblock %}

{% block page_actions %}
    <div class="toolbar f-j-end">
        <button class="i-button highlight icon-floppy js-save-template hide-if-locked">
            {%- trans %}Save Template{% endtrans -%}
        </button>
        <a class="i-button" href="{{ url_for('.template_list', owner) }}">{% trans %}Go back{% endtrans %}</a>
    </div>
{% endblock %}

{% block content %}
    {% if tpls_count %}
        <div id="backside-warning" class="affected-targets-warning weak-hidden">
            {% call message_box('warning', fixed_width=true) %}
                <p>
                    {% set link_start %}<a href="#" class="js-back-affected">{% endset %}
                    {% set link_end %}</a>{% endset %}
                    {%- trans count=tpls_count -%}
                        This template is used as the back side of
                        {{ link_start }}another template{{ link_end }}.
                        The back side of that template <strong>will be removed</strong> if the
                        dimensions of this template change.
                    {%- pluralize -%}
                        This template is used as the back side of
                        {{ link_start }}{{ tpls_count }} templates{{ link_end }}.
                        The back side of those templates <strong>will be removed</strong> if the
                        dimensions of this template change.
                    {%- endtrans -%}
                </p>
            {% endcall %}
        </div>
        <div class="back-warning-qtip-content hidden">
            <ul class="js-back-affected qbubble-item-list">
                {% for related_tpls_owner, related_tpls in related_tpls_per_owner.items() %}
                    {% for related_tpl in related_tpls %}
                        <li>{{ related_tpl.title }} ({{ related_tpls_owner.title }})</li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    <div id="frontside-warning" class="affected-targets-warning weak-hidden">
        {% call message_box('warning', fixed_width=true) %}
            <p>
                {% set link_start %}<a href="#" class="js-front-affected">{% endset %}
                {% set link_end %}</a>{% endset %}
                {%- trans -%}
                    If you change the dimensions of this template,
                    its {{ link_start }}back side template{{ link_end }} <strong>will be removed</strong> because it has
                    different dimensions.
                {%- endtrans -%}
            </p>
        {% endcall %}
    </div>
    <div class="front-warning-qtip-content hidden">
        <div class="js-front-affected-title qbubble-item-list">
            {{ backside_template_data.title }}
        </div>
    </div>
    <div class="designer-tools flexcol">
        <div class="designer-tools-row">
            <div class="tool">
                <label>{% trans %}Name{% endtrans %}</label>
                <input class="js-template-name" size="20" type="text">
            </div>
            <div class="tool js-hide-on-flip" title="{% trans %}Allow cloning this template in subcategories and events{% endtrans %}">
                <label for="is-clonable">{% trans %}Allow cloning{% endtrans %}</label>
                <input class="js-is-clonable" type="checkbox" name="is-clonable" id="is-clonable">
            </div>
            <div class="tool js-hide-on-flip">
                <i class="icon-rulers" title="{% trans %}Template dimensions{% endtrans %}"></i>
                <div class="subtool">
                    <label>{% trans %}Width:{% endtrans %}</label>
                    <input class="template-width js-template-dimension" size="5" type="number">
                    <span class="scale">cm</span>
                </div>
                <div class="subtool">
                    <button class="js-change-orientation i-button icon-transmission text-color subtle"
                            title="{% trans %}Change orientation{% endtrans %}"></button>
                </div>
                <div class="subtool">
                    <label>{% trans %}Height:{% endtrans %}</label>
                    <input class="template-height js-template-dimension" size="5" type="number">
                    <span class="scale">cm</span>
                </div>
                <div class="subtool">
                    <label>{% trans %}Preset:{% endtrans %}</label>
                    <select class="js-preset-tool" data-attr="preset">
                        <option value="custom">{% trans %}Custom size{% endtrans %}</option>
                        <optgroup label="{% trans %}Landscape orientation{% endtrans %}">
                            <option value="a6" data-width="14.8" data-height="10.5">A6</option>
                            <option value="a7" data-width="10.5" data-height="7.4">A7</option>
                            <option value="business_card" data-width="8.5" data-height="5.4">
                                {%- trans %}Business card{% endtrans -%}
                            </option>
                            {{ template_hook('extra-designer-tpl-page-size', template=template, landscape=true) }}
                        </optgroup>
                        <optgroup label="{% trans %}Portrait orientation{% endtrans %}">
                            <option value="a6" data-width="10.5" data-height="14.8">A6</option>
                            <option value="a7" data-width="7.4" data-height="10.5">A7</option>
                            <option value="business_card" data-width="5.4" data-height="8.5">
                                {%- trans %}Business card{% endtrans -%}
                            </option>
                            {{ template_hook('extra-designer-tpl-page-size', template=template, landscape=false) }}
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="tool js-hide-on-flip">
                <label for="grid-snap">{% trans %}Snap to grid{% endtrans %}</label>
                <input id="grid-snap" type="checkbox">
            </div>
            <div class="tool js-hide-on-flip">
                <i class="icon-image" title="{% trans %}Template background{% endtrans %}"></i>
                <form id="bg-form" class="content flexrow f-a-center"
                      action="{{ url_for('designer.upload_image', template, background=true) }}"
                      enctype="multipart/form-data"
                      method="POST">
                    <input type="hidden" value="{{ session.csrf_token }}" name="csrf_token">
                    <input id="backgroundFile" name="file" type="file">
                    <label for="backgroundFile" class="i-button background-label truncate-text">
                        {%- trans %}Choose a file{% endtrans -%}
                    </label>
                    <div class="subtool">
                        <div class="toolbar">
                            <button class="i-button icon-upload icon-only js-upload-bg"
                                    title="{% trans %}Upload file{% endtrans %}"></button>
                            <button class="i-button icon-cross icon-only js-remove-bg" disabled
                                    title="{% trans %}Remove background{% endtrans %}"></button>
                        </div>
                    </div>
                    <div class="subtool background-position">
                        <div>
                            <input type="radio" id="bg-position-stretch" name='bg-position' value="stretch" checked>
                            <label for="bg-position-stretch">{% trans %}Stretch{% endtrans %}</label>
                        </div>
                        <div>
                            <input type='radio' id="bg-position-center" name='bg-position' value="center">
                            <label for="bg-position-center">{% trans %}Center{% endtrans %}</label>
                        </div>
                    </div>
                </form>
            </div>
            {% if template.type.name == 'badge' %}
                <div class="tool backside-tools">
                    <span>{% trans %}Back side template:{% endtrans %}</span>
                    <span class="backside-template-title">
                        {{- template.backside_template.title if template.backside_template -}}
                    </span>
                    <button class="js-remove-backside i-button icon-remove icon-only text-color subtle"
                            title="{% trans %}Remove back side{% endtrans %}"></button>
                </div>
                <div class="tool backside-tools">
                    <button class="js-backside-list-dialog i-button icon-transmission"
                            data-href="{{ url_for('.backside_template_list', template) }}"
                            data-title="{% trans %}Select a template for the back side{% endtrans %}">
                        {%- trans %}Change back side{% endtrans -%}
                    </button>
                </div>
            {% endif %}
        </div>
        <div class="designer-tools-row second-row disappear">
            <div class="element-tools hidden">
                <div class="tool">
                    <span class="selection-text f-self-stretch"></span>
                    <button class="js-remove-element i-button icon-remove icon-only text-color subtle"
                            title="{% trans %}Remove element{% endtrans %}"></button>
                </div>
                <div class="tool font-tools">
                    <i class="icon-font-size" title="{% trans %}Font dimensions{% endtrans %}"></i>
                    <div class="subtool">
                        {% block fonts %}
                            <select id='font-selector' class="js-font-tool" data-attr="font">
                                <optgroup label="{% trans %}Normal Fonts{% endtrans %}">
                                    <option value="serif">Serif</option>
                                    <option value="courier">Courier</option>
                                    <option value="sans-serif">Sans Serif</option>
                                </optgroup>
                                <optgroup label="{% trans %}Special Character Fonts{% endtrans %}">
                                    <option>LinuxLibertine</option>
                                    <option>Kochi-Mincho</option>
                                    <option>Kochi-Gothic</option>
                                    <option>Uming-CN</option>
                                </optgroup>
                            </select>
                        {% endblock %}
                    </div>
                    <div class="subtool">
                        <div class="i-color-field clearfix">
                            <div class="clickable-wrapper">
                                <span id="text-color-preview" class="color-preview"></span>
                                <input title="{% trans %}Text color{% endtrans %}" type="text"
                                       id="text-color-selector" value="#" class="js-font-tool" data-attr="color"
                                       maxlength="7" size="2">
                            </div>
                        </div>
                    </div>
                    <div class="subtool">
                        <div class="i-color-field clearfix">
                            <div class="clickable-wrapper">
                                <span id="bg-color-preview" class="color-preview"></span>
                                <input title="{% trans %}Text background color{% endtrans %}" type="text"
                                       value="#" id="bg-color-selector" class="js-font-tool" data-attr="background_color"
                                       maxlength="7" size="2">
                            </div>
                        </div>
                    </div>
                    <div class="subtool">
                        <select id='style-selector' class="js-font-tool" data-attr="style">
                            <option value="normal">{% trans %}Normal{% endtrans %}</option>
                            <option value="bold">{% trans %}Bold{% endtrans %}</option>
                            <option value="italic">{% trans %}Italic{% endtrans %}</option>
                            <option value="bold_italic">{% trans %}Bold &amp; Italic{% endtrans %}</option>
                        </select>
                    </div>
                    <div class="subtool">
                        <select id='size-selector' class="js-font-tool" data-attr="size">
                            <option value="160pt">160pt</option>
                            <option value="150pt">150pt</option>
                            <option value="140pt">140pt</option>
                            <option value="130pt">130pt</option>
                            <option value="120pt">120pt</option>
                            <option value="110pt">110pt</option>
                            <option value="100pt">100pt</option>
                            <option value="90pt">90pt</option>
                            <option value="80pt">80pt</option>
                            <option value="70pt">70pt</option>
                            <option value="60pt">60pt</option>
                            <option value="50pt">50pt</option>
                            <option value="40pt">40pt</option>
                            <option value="30pt">30pt</option>
                            <option value="24pt">24pt</option>
                            <option value="20pt">20pt</option>
                            <option value="18pt">18pt</option>
                            <option value="15pt" selected>15pt</option>
                            <option value="13.5pt">13.5pt</option>
                            <option value="12pt">12pt</option>
                            <option value="10pt">10pt</option>
                            <option value="7.5pt">7.5pt</option>
                            <option value="7pt">7pt</option>
                            <option value="6pt">6pt</option>
                        </select>
                    </div>
                    <div class="subtool">
                        <select id='alignment-selector' class="js-font-tool" data-attr="alignment">
                            <option value="left">{% trans %}Left{% endtrans %}</option>
                            <option value="right">{% trans %}Right{% endtrans %}</option>
                            <option value="center">{% trans %}Center{% endtrans %}</option>
                            <option value="justified">{% trans %}Justified{% endtrans %}</option>
                        </select>
                    </div>
                    <div class="subtool">
                        <select id='overflow-selector' class="js-font-tool" data-attr="overflow">
                            <option value="wrap">{% trans %}Wrap{% endtrans %}</option>
                            <option value="resize">{% trans %}Resize{% endtrans %}</option>
                        </select>
                    </div>
                </div>
                <div class="tool">
                    <i class="icon-rulers" title="{% trans %}Element dimensions{% endtrans %}"></i>
                    <div class="subtool">
                        <label for="element-width">{% trans %}Width:{% endtrans %}</label>
                        <input id="element-width" class="js-element-width" size="5" type="number">
                        <span class="scale">cm</span>
                    </div>
                    <div class="subtool" id="subtool-element-height">
                        <label for="element-height">{% trans %}Height:{% endtrans %}</label>
                        <input id="element-height" class="js-element-height" size="5" type="number">
                        <span class="scale">cm</span>
                    </div>
                </div>
                <div class="tool" style="display: none;">
                    <label for="fixed-text-field">{% trans %}Text:{% endtrans %}</label>
                    <input type="text" id="fixed-text-field">
                </div>
                <div id="fixed-image-tool" class="tool js-hide-on-flip">
                    <i class="icon-image" title="{% trans %}Fixed Image{% endtrans %}"></i>
                    <form id="img-form" class="content flexrow f-a-center"
                          action="{{ url_for('designer.upload_image', template, background=false) }}"
                          enctype="multipart/form-data"
                          method="POST">
                        <input type="hidden" value="{{ session.csrf_token }}" name="csrf_token">
                        <input id="imageFile" name="file" type="file">
                        <label for="imageFile" class="i-button background-label truncate-text">
                            {%- trans %}Choose a file{% endtrans -%}
                        </label>
                        <div class="subtool">
                            <div class="toolbar">
                                <button class="i-button icon-upload icon-only js-upload-img"
                                        title="{% trans %}Upload file{% endtrans %}"></button>
                                <button class="i-button icon-cross icon-only js-remove-img" disabled
                                        title="{% trans %}Remove image{% endtrans %}"></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tool">
                    <i class="icon-layout" title="{% trans %}Element positioning{% endtrans %}"></i>
                    <div class="toolbar thin">
                        <button title="{% trans %}Move item to the top{% endtrans %}"
                                class="i-button move-button icon-only text-color subtle icon-collapse"
                                data-direction="top">
                        </button>
                        <button title="{% trans %}Move item to the left{% endtrans %}"
                                class="i-button move-button icon-only text-color subtle icon-prev"
                                data-direction="left">
                        </button>
                        <button title="{% trans %}Center item{% endtrans %}"
                                class="i-button move-button icon-only text-color subtle icon-circle-small"
                                data-direction="center">
                        </button>
                        <button title="{% trans %}Move item to the right{% endtrans %}"
                                class="i-button move-button icon-only text-color subtle icon-next"
                                data-direction="right">
                        </button>
                        <button title="{% trans %}Move item to the bottom{% endtrans %}"
                                class="i-button move-button icon-only text-color subtle icon-expand"
                                data-direction="bottom">
                        </button>
                        <button title="{% trans %}Move item to the back{% endtrans %}"
                                class="i-button move-button icon-only text-color subtle icon-first"
                                data-direction="back">
                        </button>
                        <button title="{% trans %}Move item to the front{% endtrans %}"
                                class="i-button move-button icon-only text-color subtle icon-last"
                                data-direction="front">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="designer-canvas-wrapper flexcol f-a-center">
        <div class="controls">
            {% if template.type.name == 'badge' %}
                <div class="template-side-controls">
                    <div class="toolbar f-j-center">
                        <button class="i-button highlight js-toggle-side front">{% trans %}Front side{% endtrans %}</button>
                        <button class="i-button js-toggle-side back">{% trans %}Back side{% endtrans %}</button>
                    </div>
                </div>
            {% endif %}
            <div class="insert-element-controls js-invisible-on-flip">
                <div class="flexrow f-a-baseline">
                    <label for="element-list">{% trans %}Insert element:{% endtrans %}</label>
                    <select id="element-list">
                        {% for group_id, group in placeholders.items() | sort(attribute='1.position') %}
                            {% if group_id not in config.disallow_groups %}
                                <optgroup label="{{ group.title }}">
                                    {% for option_id, option in group.options|dictsort(by='value') %}
                                        <option value="{{ option_id }}">{{ option }}</option>
                                    {% endfor %}
                                </optgroup>
                            {% endif %}
                        {% endfor %}
                    </select>
                    <button id="insert-button" class="insert-element-btn i-button highlight icon-next text-color subtle"
                            title="{% trans %}Insert{% endtrans %}">
                        {%- trans %}Insert{% endtrans -%}
                    </button>
                </div>
            </div>
        </div>
        <table class="designer-table" border="0" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td align="left" valign="bottom" height="16px">
                        <div id="horizontal-ruler" class="ruler">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td valign="top" align="right" width="16px">
                        <div id="vertical-ruler" class="ruler">
                        </div>
                    </td>
                    <td align="left" valign="top">
                        <div class="template-container">
                            <div class="template-content">
                                <div class="template-side front active" data-side="front">
                                    <img class="background-image">
                                </div>
                                <div class="template-side back" data-side="back">
                                    <div class="backside-placeholder">
                                        <div class="placeholder-content">
                                            <div class="placeholder-text">{% trans %}The back side is empty.{% endtrans %}</div>
                                            <div class="placeholder-link">
                                                {% set link_start %}
                                                    <a class="js-backside-list-dialog"
                                                       data-href="{{ url_for('.backside_template_list', template) }}"
                                                       data-title="{% trans %}Select a template for the back side{% endtrans %}">
                                                {% endset %}
                                                {% set link_end %}</a>{% endset %}
                                                {%- trans link_start=link_start|safe, link_end=link_end|safe -%}
                                                    {{ link_start }}Select an existing template{{ link_end }} to be used
                                                    as the back side of this template.
                                                {%- endtrans -%}
                                            </div>
                                        </div>
                                    </div>
                                    <img class="background-image">
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        (function() {
            'use strict';

            setupDesigner({{ template_data | tojson }}, {{ backside_template_data | tojson }}, {{ config | tojson }},
                          {{ placeholders | tojson }}, {{ image_types | tojson }});
        })();
        setupColorPickerWidget({
            fieldId: 'text-color-selector',
            showField: true
        });
        setupColorPickerWidget({
            fieldId: 'bg-color-selector',
            showField: true
        });
    </script>
{% endblock %}
