obscreen/views/slideshow/contents/edit-text.jinja.html

{% 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/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-x">Texte à afficher</label>
                        <div class="widget">
                            <input type="number" id="elem-x" name="elem-x">
                        </div>
                    </div>

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

                    <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">
                            <span>pt</span>
                        </div>
                    </div>

                    <h3 class="divide">
                        {{ l.common_size }}
                    </h3>

                    <div class="form-group">
                        <label for="elem-width">{{ l.common_width }}</label>
                        <div class="widget">
                            <input type="number" id="elem-width" name="elem-width">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="elem-height">{{ l.common_height }}</label>
                        <div class="widget">
                            <input type="number" id="elem-height" name="elem-height">
                        </div>
                    </div>

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


{% endblock %}