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

                    <div class="form-group">
                        <label for="elem-text">Text Label</label>
                        <div class="widget">
                            <input type="text" id="elem-text" name="elem-text"
                                   value="Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !222">
                        </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="elem-font-size" maxlength="3"
                                       class="numeric-input chars-3" value="20">
                                <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="elem-fg-color" class="color-picker"
                                       data-jscolor="{ value: '#FFFFFFFF', 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">
                            <select name="elem-font-family" id="elem-font-family" class="size-m">
                                <option value="Arial">Arial</option>
                                <option value="Arial Black">Arial Black</option>
                                <option value="Verdana">Verdana</option>
                                <option value="Trebuchet MS">Trebuchet MS</option>
                                <option value="Georgia">Georgia</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Courier New">Courier New</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Impact">Impact</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Gill Sans">Gill Sans</option>
                                <option value="Helvetica">Helvetica</option>
                                <option value="Optima">Optima</option>
                                <option value="Garamond">Garamond</option>
                                <option value="Baskerville">Baskerville</option>
                                <option value="Copperplate">Copperplate</option>
                                <option value="Futura">Futura</option>
                                <option value="Monaco">Monaco</option>
                                <option value="Andale Mono">Andale Mono</option>
                            </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="elem-font-bold" value="bold">
                                    <label for="elem-font-bold" class="btn btn-neutral">
                                        <i class="fa fa-bold"></i>
                                    </label>
                                    <input type="checkbox" id="elem-font-italic" name="elem-font-italic" value="italic">
                                    <label for="elem-font-italic" class="btn btn-neutral">
                                        <i class="fa fa-italic"></i>
                                    </label>
                                    <input type="checkbox" id="elem-text-underline" name="elem-text-underline"
                                           value="underline">
                                    <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="elem-text-align" value="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="elem-text-align"
                                           value="center"
                                           checked="checked">
                                    <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="elem-text-align" value="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="elem-bg-color" class="color-picker"
                                   data-jscolor="{ value: '#000000FF', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
                        </div>
                    </div>

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

                    <div class="horizontal">
                        <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="elem-container-margin" maxlength="3"
                                       class="numeric-input chars-3" value="0">
                                <span>pt</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="elem-single-line">Single Line Only</label>
                            <div class="widget">
                                <div class="toggle">
                                    <input type="checkbox" name="elem-single-line" id="elem-single-line" value="1"/>
                                    <label for="elem-single-line"></label>
                                </div>
                            </div>
                        </div>

                    </div>


                </form>
            </div>
        </div>
    </div>


{% endblock %}