{% set active_pill_route='slideshow_content_list' %}
{% extends 'base.jinja.html' %}

{% block page_title %}
    {{ l.slideshow_content_page_title }}
{% endblock %}

{% block add_css %}
    {{ HOOK(H_SLIDESHOW_CONTENT_CSS) }}
{% endblock %}

{% block add_js %}
    <script src="{{ STATIC_PREFIX }}js/lib/jscolor.min.js"></script>
    <script src="{{ STATIC_PREFIX }}js/slideshow/contents.js"></script>
    <script src="{{ STATIC_PREFIX }}js/slideshow/content-text.js"></script>
    {{ HOOK(H_SLIDESHOW_CONTENT_JAVASCRIPT) }}
{% endblock %}

{% block body_class %}view-content-edit view-content-edit-text edit-page{% endblock %}

{% block top_page %}
    <div class="top-content">
        <h1>
            {{ l.slideshow_content_form_edit_title }}
        </h1>

        {% set icon = enum_content_type.get_fa_icon(content.type) %}
        {% set color = enum_content_type.get_color_icon(content.type) %}

        <h3>
            <span class="{{ color }} border-{{ color }}">
                <i class="fa {{ icon }} {{ color }}"></i> {{ t(content.type) }}
            </span>
        </h3>

        <a href="{{ url_for('player', preview_content_id=content.id) }}" target="_blank" class="btn btn-naked">
            <i class="fa fa-external-link"></i>
        </a>
    </div>
{% endblock %}

{% block main_page %}
    <div class="bottom-content">
        <div class="page-panel left-panel">
            <div class="inner dirview">
                <div class="breadcrumb-container">
                    <ul class="breadcrumb">
                        {% set ns = namespace(breadpath='') %}
                        {% for dir in working_folder_path[1:].split('/') %}
                            {% set ns.breadpath = ns.breadpath ~ '/' ~ dir %}
                            <li>
                                <a href="{{ url_for('slideshow_content_cd', path=ns.breadpath) }}">
                                    <i class="explr-icon explr-icon-folder"></i>
                                    {{ truncate(dir, 25, '...') }}
                                </a>
                            </li>
                            {% if not loop.last %}
                                <li class="divider">
                                    <i class="fa fa-chevron-right"></i>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>

                <div class="horizontal">
                    <div class="form-holder">
                        <form class="form"
                              action="{{ url_for('slideshow_content_save', content_id=content.id) }}?path={{ working_folder_path }}"
                              method="POST">
                            <div class="form-group">
                                <label for="content-edit-name">{{ l.slideshow_content_form_label_name }}</label>
                                <div class="widget">
                                    <input type="text" name="name" id="content-edit-name" required="required"
                                           value="{{ content.name }}"/>
                                </div>
                            </div>

                            <input type="hidden" name="location" id="content-edit-location"
                                   value="{{ content.location }}"/>

                            <div class="actions actions-right">
                                <button type="submit" class="btn btn-info">
                                    <i class="fa fa-save icon-left"></i>
                                    {{ l.common_save }}
                                </button>
                                <a href="{{ url_for('slideshow_content_list') }}" class="btn btn-naked">
                                    <i class="fa fa-rectangle-xmark icon-left"></i>
                                    {{ l.common_cancel }}
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <div class="page-content">
            <div class="inner">
                <h3 class="main">
                    {{ l.composition_monitor }}
                </h3>
                <div class="screen-holder">
                    <div class="screen" id="screen">
                        <!-- Elements will be dynamically added here -->
                    </div>
                </div>
            </div>
        </div>


        <div class="page-panel right-panel">
            <div class="form-element-properties">
                <form id="elementForm">
                    <h3>
                        Text
                    </h3>

                    {% set contentStyles = json_loads(content.location) %}

                    <div class="form-group">
                        <label for="elem-text">Text Label</label>
                        <div class="widget">
                            <input type="text" id="elem-text" name="textLabel"
                                   value="{{ contentStyles.textLabel }}">
                        </div>
                    </div>

                    <h3 class="divide">
                        Style
                    </h3>

                    <div class="horizontal">

                        <div class="form-group">
                            <label for="elem-font-size">Font Size</label>
                            <div class="widget widget-unit">
                                <input type="text" id="elem-font-size" name="fontSize" maxlength="3"
                                       class="numeric-input chars-3" value="{{ contentStyles.fontSize }}">
                                <span>pt</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="elem-fg-color">Text Color</label>
                            <div class="widget">
                                <input type="text" id="elem-fg-color" name="color" class="color-picker"
                                       data-jscolor="{ value: '#{{ contentStyles.color }}', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="elem-font-family">Text Font Type</label>
                        <div class="widget">
                            {% set fonts = [
                                {"value": "Arial", "name": "Arial"},
                                {"value": "Arial Black", "name": "Arial Black"},
                                {"value": "Verdana", "name": "Verdana"},
                                {"value": "Trebuchet MS", "name": "Trebuchet MS"},
                                {"value": "Georgia", "name": "Georgia"},
                                {"value": "Times New Roman", "name": "Times New Roman"},
                                {"value": "Courier New", "name": "Courier New"},
                                {"value": "Comic Sans MS", "name": "Comic Sans MS"},
                                {"value": "Impact", "name": "Impact"},
                                {"value": "Tahoma", "name": "Tahoma"},
                                {"value": "Gill Sans", "name": "Gill Sans"},
                                {"value": "Helvetica", "name": "Helvetica"},
                                {"value": "Optima", "name": "Optima"},
                                {"value": "Garamond", "name": "Garamond"},
                                {"value": "Baskerville", "name": "Baskerville"},
                                {"value": "Copperplate", "name": "Copperplate"},
                                {"value": "Futura", "name": "Futura"},
                                {"value": "Monaco", "name": "Monaco"},
                                {"value": "Andale Mono", "name": "Andale Mono"}
                            ] %}
                            <select name="fontFamily" id="elem-font-family" class="size-m">
                                {% for font in fonts %}
                                    <option value="{{ font.value }}" {% if font.value == contentStyles.fontFamily %}selected="selected"{% endif %}>
                                        {{ font.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>


                    <div class="horizontal">
                        <div class="form-group">
                            <label for="elem-fg-color">Text Style</label>
                            <div class="widget">
                                <div class="checkbox-group">
                                    <input type="checkbox" id="elem-font-bold" name="fontBold" value="bold" {{ 'checked' if contentStyles.fontBold }}>
                                    <label for="elem-font-bold" class="btn btn-neutral">
                                        <i class="fa fa-bold"></i>
                                    </label>
                                    <input type="checkbox" id="elem-font-italic" name="fontItalic" value="italic" {{ 'checked' if contentStyles.fontItalic }}>
                                    <label for="elem-font-italic" class="btn btn-neutral">
                                        <i class="fa fa-italic"></i>
                                    </label>
                                    <input type="checkbox" id="elem-text-underline" name="textUnderline" value="underline" {{ 'checked' if contentStyles.textUnderline }}>
                                    <label for="elem-text-underline" class="btn btn-neutral">
                                        <i class="fa fa-underline"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="elem-fg-color">Text Alignment</label>
                            <div class="widget">
                                <div class="radio-group">
                                    <input type="radio" id="elem-text-align-left" name="textAlign" value="left" {{ 'checked' if contentStyles.textAlign == 'left' }}>
                                    <label for="elem-text-align-left" class="btn btn-neutral">
                                        <i class="fa fa-align-left"></i>
                                    </label>
                                    <input type="radio" id="elem-text-align-center" name="textAlign" value="center" {{ 'checked' if contentStyles.textAlign == 'center' }}>
                                    <label for="elem-text-align-center" class="btn btn-neutral">
                                        <i class="fa fa-align-center"></i>
                                    </label>
                                    <input type="radio" id="elem-text-align-right" name="textAlign" value="right" {{ 'checked' if contentStyles.textAlign == 'right' }}>
                                    <label for="elem-text-align-right" class="btn btn-neutral">
                                        <i class="fa fa-align-right"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h3 class="divide">
                        Background
                    </h3>


                    <div class="form-group">
                        <label for="elem-bg-color">Background Color</label>
                        <div class="widget">
                            <input type="text" id="elem-bg-color" name="backgroundColor" class="color-picker"
                                   data-jscolor="{ value: '#{{ contentStyles.backgroundColor }}', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
                        </div>
                    </div>

                    <h3 class="divide">
                        Scrolling Effect
                    </h3>

                    <div class="horizontal">
                        <div class="form-group">
                            <label for="elem-scroll-enable">Enable</label>
                            <div class="widget">
                                <div class="toggle">
                                    <input type="checkbox" name="scrollEnable" id="elem-scroll-enable" {{ 'checked' if contentStyles.scrollEnable }} />
                                    <label for="elem-scroll-enable"></label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="elem-scroll-direction">Direction</label>
                            <div class="widget">
                                <div class="radio-group">
                                    <input type="radio" id="elem-scroll-direction-left" name="scrollDirection" value="left" {{ 'checked' if contentStyles.scrollDirection == 'left' }}>
                                    <label for="elem-scroll-direction-left" class="btn btn-neutral">
                                        <i class="fa fa-arrow-left"></i>
                                    </label>
                                    <input type="radio" id="elem-scroll-direction-right" name="scrollDirection" value="right" {{ 'checked' if contentStyles.scrollDirection == 'right' }}>
                                    <label for="elem-scroll-direction-right" class="btn btn-neutral">
                                        <i class="fa fa-arrow-right"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="elem-scroll-speed">Speed</label>
                            <div class="widget widget-unit">
                                <input type="text" id="elem-scroll-speed" name="scrollSpeed" maxlength="3" class="numeric-input chars-3" value="{{ contentStyles.scrollSpeed }}">
                            </div>
                        </div>
                    </div>



                    <h3 class="divide">
                        Layout
                    </h3>

                    <div class="horizontal">
                        <div class="form-group">
                            <label for="elem-single-line">Single Line Only</label>
                            <div class="widget">
                                <div class="toggle">
                                    <input type="checkbox" name="singleLine" id="elem-single-line" {{ 'checked' if contentStyles.singleLine }} />
                                    <label for="elem-single-line"></label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="elem-container-margin">Container Margin</label>
                            <div class="widget widget-unit">
                                <input type="text" id="elem-container-margin" name="margin" maxlength="3" class="numeric-input chars-3" value="{{ contentStyles.margin }}">
                                <span>pt</span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


{% endblock %}