{% extends "pretixcontrol/event/base.html" %}
{% load i18n %}
{% load static %}
{% load compress %}
{% block title %}{% trans "PDF Editor" %}{% endblock %}
{% block custom_header %}
    {{ block.super }}
    {% compress css %}
        <link type="text/css" rel="stylesheet" href="{% static "pretixcontrol/scss/pdfeditor.css" %}">
    {% endcompress %}
    <link type="text/css" rel="stylesheet" href="{% url "control:pdf.css" %}">
{% endblock %}
{% block content %}
    <h1>
        {% trans "PDF Editor" %}
        {% if title %}
            <small>{{ title }}</small>
        {% endif %}
    </h1>

    <script type="application/json" id="editor-data">
        {{ layout|safe }}
    </script>
    <div class="row">
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="pull-right flip">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-source"
                                    title="{% trans "Code" %}">
                                <span class="fa fa-code"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-paste"
                                    title="{% trans "Paste" %}">
                                <span class="fa fa-paste"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-undo"
                                    title="{% trans "Undo" %}">
                                <span class="fa fa-undo"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-redo"
                                    title="{% trans "Redo" %}">
                                <span class="fa fa-repeat"></span>
                            </button>
                        </div>
                    </div>
                    {% trans "Editor" %}
                </div>
                <div class="panel-body">
                    <div id="editor-canvas-area">
                        <canvas id="pdf-canvas"
                                data-pdf-url="{{ pdf }}"
                                data-worker-url="{% static "pdfjs/pdf.worker.js" %}">

                        </canvas>
                        <div id="fabric-container">
                            <canvas id="fabric-canvas">
                            </canvas>
                        </div>
                        <div id="source-container">
                            <div class="alert alert-warning">
                                <strong>
                                    {% blocktrans trimmed %}
                                        This feature is only intended for advanced users. We recommend to only use it
                                        to copy and share ticket designs, not to modify the design source code.
                                    {% endblocktrans %}
                                </strong>
                            </div>
                            <p>
                                <textarea id="source-textarea" class="form-control"></textarea>
                            </p>
                            <p class="text-right flip">
                                <button class="btn btn-default" id="source-close">
                                    {% trans "Cancel" %}
                                </button>
                                <button class="btn btn-default" id="source-save">
                                    {% trans "Apply" %}
                                </button>
                            </p>
                        </div>
                        <div id="loading-container">
                            <div id="loading-upload">
                                <span class="fa fa-cog big-rotating-icon"></span>
                                <p>
                                    {% trans "Uploading new PDF background…" %}
                                </p>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 0%;">
                                    </div>
                                </div>
                            </div>
                            <div id="loading-initial">
                                <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                                <p>
                                    {% blocktrans trimmed %}
                                        This editor allows you to create a design for the PDF tickets of your event.
                                        You can upload a background PDF and then use this tool to place texts and
                                        a QR code on the ticket.
                                    {% endblocktrans %}
                                </p>
                                <p>&nbsp;</p>
                                <p>
                                    <span class="fa fa-eye fa-2x"></span>
                                </p>
                                <p>
                                    {% blocktrans trimmed %}
                                        Please note that the editor can only provide a rough preview. Some details,
                                        for example in text rendering, might look slightly different in the final
                                        tickets. You can use the "Preview" button on the right for a more precise
                                        preview.
                                    {% endblocktrans %}
                                </p>
                                <p>&nbsp;</p>
                                <p>
                                    <span class="fa fa-chrome fa-2x"></span>
                                    <span class="fa fa-firefox fa-2x"></span>
                                    <span class="fa fa-opera fa-2x"></span>
                                </p>
                                <p>
                                    {% blocktrans trimmed %}
                                        The editor is tested with recent versions of Google Chrome, Mozilla Firefox
                                        and Opera. Other browsers, especially Internet Explorer or Microsoft Edge, might
                                        have problems displaying your background PDF or loading the correct fonts.
                                    {% endblocktrans %}
                                </p>
                                <noscript>
                                    <div class="alert alert-danger">
                                        {% blocktrans trimmed %}
                                            The editor requires JavaScript to work. Please enable JavaScript in your
                                            browser to continue.
                                        {% endblocktrans %}
                                    </div>
                                </noscript>
                                <p>&nbsp;</p>
                                <p>
                                    <em id="editor-loading">
                                        <span class="fa fa-cog fa-spin"></span>
                                        {% trans "Loading…" %}
                                    </em>
                                    <button id="editor-start" class="btn btn-primary sr-only">
                                        {% trans "Start editing" %}
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" id="editor-toolbox-area">
            <div class="panel panel-default" id="toolbox">
                <div class="panel-heading">
                    <div class="pull-right object-buttons flip">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-cut"
                                    title="{% trans "Cut" %}">
                                <span class="fa fa-cut"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-copy"
                                    title="{% trans "Copy" %}">
                                <span class="fa fa-copy"></span>
                            </button>
                            <button type="button" class="btn btn-danger btn-xs" id="toolbox-delete"
                                    title="{% trans "Delete" %}">
                                <span class="fa fa-trash"></span>
                            </button>
                        </div>
                    </div>
                    <span id="toolbox-heading">
                        {% trans "Loading…" %}
                    </span>
                </div>
                <div class="panel-body" id="toolbox-body">
                    <div class="row control-group pdf-info">
                        <div class="col-sm-6">
                            <label>{% trans "Width (mm)" %}</label><br>
                            <input type="number" id="pdf-info-width" class="input-block-level form-control">
                        </div>
                        <div class="col-sm-6">
                            <label>{% trans "Height (mm)" %}</label><br>
                            <input type="number" id="pdf-info-height" class="input-block-level form-control">
                        </div>
                    </div>
                    <div class="row control-group pdf-info">
                        <div class="col-sm-12">
                            <label>{% trans "Background PDF" %}</label><br>
                            <p>
                                <button class="btn btn-default background-button" id="pdf-empty">
                                    {% trans "Create empty background" %}
                                </button>
                            </p>
                            <span class="btn btn-default fileinput-button background-button">
                                <i class="fa fa-upload"></i>
                                <span>{% trans "Upload custom background" %}</span>
                                <input id="fileupload" type="file" name="background">
                            </span>
                        </div>
                        <div class="col-sm-12 help-inline">
                            <p>
                                {% blocktrans trimmed %}
                                    After you changed the page size, you need to create a new empty background. If you
                                    want to use a custom background, it already needs to have the correct size.
                                {% endblocktrans %}
                            </p>
                        </div>
                    </div>
                    <div class="row control-group pdf-info">
                        <div class="col-sm-12">
                            <label>{% trans "Preferred language" %}</label><br>
                            <select class="form-control" id="pdf-info-locale">
                                <option value="">{% trans "Order locale" %}</option>
                                {% for l in locales %}
                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row control-group position">
                        <div class="col-sm-6">
                            <label>{% trans "x (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-position-x">
                        </div>
                        <div class="col-sm-6">
                            <label>{% trans "y (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-position-y">
                        </div>
                    </div>
                    <div class="row control-group squaresize poweredby">
                        <div class="col-sm-12">
                            <label>{% trans "Size (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-squaresize">
                        </div>
                    </div>
                    <div class="row control-group squaresize">
                        <div class="col-sm-12">
                            <p>
                                {% blocktrans trimmed %}
                                    The final QR code will be slightly smaller because some whitespace is required
                                    for proper scanning.
                                {% endblocktrans %}
                            </p>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-6">
                            <label>{% trans "Font size (pt)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.1"
                                    id="toolbox-fontsize">
                        </div>
                        <div class="col-sm-6">
                            <label>&nbsp;</label><br>
                            <div class="btn-group btn-group-justified" role="group">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default toggling" data-action="bold">
                                        <span class="fa fa-bold"></span>
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default toggling" data-action="italic">
                                        <span class="fa fa-italic"></span>
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default toggling" data-action="downward"
                                        data-toggle="tooltip" title="{% trans "Flow multiple lines downward from specified position" %}">
                                        <span class="fa fa-caret-square-o-down"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-6">
                            <label>{% trans "Text color" %}</label><br>
                            <input type="text" value="#000000" class="input-block-level form-control colorpickerfield"
                                    id="toolbox-col">
                        </div>
                        <div class="col-sm-6">
                            <label>&nbsp;</label><br>
                            <div class="btn-group btn-group-justified" id="toolbox-align">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default option toggling" data-action="left">
                                        <span class="fa fa-align-left"></span>
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default option toggling" data-action="center">
                                        <span class="fa fa-align-center"></span>
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default option toggling" data-action="right">
                                        <span class="fa fa-align-right"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-12">
                            <label>{% trans "Font" %}</label><br>
                            <select class="input-block-level form-control" id="toolbox-fontfamily">
                                <option>Open Sans</option>
                                {% for family in fonts.keys %}
                                    <option>{{ family }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-6">
                            <label>{% trans "Width (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-textwidth">
                        </div>
                        <div class="col-sm-6">
                            <label>{% trans "Rotation (°)" %}</label><br>
                            <input type="number" value="0" class="input-block-level form-control" step="0.1"
                                    id="toolbox-textrotation">
                        </div>
                    </div>
                    <div class="row control-group poweredby">
                        <div class="col-sm-12">
                            <label>{% trans "Style" %}</label><br>
                            <select class="input-block-level form-control" id="toolbox-poweredby-style">
                                <option value="dark">{% trans "Dark" %}</option>
                                <option value="white">{% trans "Light" %}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-12">
                            <label>{% trans "Text content" %}</label><br>
                            <select class="input-block-level form-control" id="toolbox-content">
                                {% for varname, var in variables.items %}
                                    <option data-sample="{{ var.editor_sample }}" value="{{ varname }}">{{ var.label }}</option>
                                {% endfor %}
                                {% for p in request.organizer.meta_properties.all %}
                                    <option value="meta:{{ p.name }}">
                                        {% trans "Event attribute:" %} {{ p.name }}
                                    </option>
                                {% endfor %}
                                {% for p in request.event.item_meta_properties.all %}
                                    <option value="itemmeta:{{ p.name }}">
                                        {% trans "Item attribute:" %} {{ p.name }}
                                    </option>
                                {% endfor %}
                                <option value="other">{% trans "Other…" %}</option>
                            </select>
                            <textarea type="text" value="" class="input-block-level form-control"
                                    id="toolbox-content-other"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="editor-toolbox-text panel panel-default">
                <div class="panel-heading">
                    {% trans "Add a new object" %}
                </div>
                <div class="panel-body add-buttons">
                    <button class="btn btn-default btn-block" id="editor-add-text" disabled>
                        <span class="fa fa-font"></span>
                        {% trans "Text" %}
                    </button>
                    <button class="btn btn-default btn-block" id="editor-add-qrcode" data-content="secret" disabled>
                        <span class="fa fa-qrcode"></span>
                        {% trans "QR code for Check-In" %}
                    </button>
                    <button class="btn btn-default btn-block" id="editor-add-qrcode-lead"
                            data-content="pseudonymization_id"
                            disabled>
                        <span class="fa fa-qrcode"></span>
                        {% trans "QR code for Lead Scanning" %}
                    </button>
                    <button class="btn btn-default btn-block" id="editor-add-poweredby"
                            data-content="dark"
                            disabled>
                        <span class="fa fa-image"></span>
                        {% trans "pretix Logo" %}
                    </button>
                </div>
            </div>

            <form method="post" action="" id="preview-form" target="_blank">
                <div class="form-group submit-group">
                    {% csrf_token %}
                    <input type="hidden" value="" name="data">
                    <input type="hidden" value="" name="background">
                    <input type="hidden" value="true" name="preview">
                    <button type="submit" class="btn btn-default btn-lg" id="editor-preview">
                        {% trans "Preview" %}
                    </button>
                    <button type="submit" class="btn btn-primary btn-save" id="editor-save">
                        {% trans "Save" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="{% static "pdfjs/pdf.js" %}"></script>
    <script type="text/javascript" src="{% static "fabric/fabric.min.js" %}"></script>
    <script type="text/javascript" src="{% static "pretixcontrol/js/ui/editor.js" %}"></script>
    <img src="{% static 'pretixpresale/pdf/powered_by_pretix_dark.png' %}" id="poweredby-dark" class="sr-only">
    <img src="{% static 'pretixpresale/pdf/powered_by_pretix_white.png' %}" id="poweredby-white" class="sr-only">
    {% for family, styles in fonts.items %}
    {% for style, formats in styles.items %}
        {% if "sample" not in style %}
        <span class="preload-font" data-family="{{ family }}" data-style="{{ style }}">
            giItT1WQy@!-/#
            {% if "sample" in styles %}{{ styles.sample }}{% endif %}
        </span>
        {% endif %}
    {% endfor %}
    {% endfor %}
{% endblock %}

