{% extends 'base.jinja.html' %}

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

{% block add_css %}
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/flatpickr.min.css" />
    {{ HOOK(H_SLIDESHOW_CSS) }}
{% endblock %}

{% block add_js %}
    <script src="{{ STATIC_PREFIX }}js/lib/flatpickr.min.js"></script>
    <script src="{{ STATIC_PREFIX }}js/lib/tablednd-fixed.js"></script>
    <script src="{{ STATIC_PREFIX }}js/slideshow/slides.js"></script>
    <script src="{{ STATIC_PREFIX }}js/restart.js"></script>
    {{ HOOK(H_SLIDESHOW_JAVASCRIPT) }}
{% endblock %}

{% block container_class %}{% if PLAYLIST_ENABLED %}expand{% endif %}{% endblock %}

{% block page %}
    <div class="toolbar">
        <h2>{{ l.slideshow_page_title }}</h2>

        <div class="toolbar-actions">
            {{ HOOK(H_SLIDESHOW_TOOLBAR_ACTIONS_START) }}

            {% if fleet_mode %}
                {{ HOOK(H_FLEETMODE_SLIDESHOW_TOOLBAR_ACTIONS) }}
            {% endif %}

            <a href="{% if current_playlist %}{{ url_for('player_use', playlist_slug_or_id=current_playlist.slug) }}{% else %}{{ url_for('player') }}{% endif %}" target="_blank" class="btn" title="{{ l.slideshow_goto_player }}">
                <i class="fa fa-play"></i>
            </a>
            <a href="{{ url_for('slideshow_player_refresh') }}" class="btn" title="{{ l.slideshow_refresh_player }}">
                <i class="fa fa-refresh"></i>
            </a>

            <button class="purple slide-add item-add"><i class="fa fa-plus icon-left"></i>{{ l.slideshow_slide_button_add }}</button>

            {{ HOOK(H_SLIDESHOW_TOOLBAR_ACTIONS_END) }}
        </div>
    </div>

    {% if request.args.get('refresh_player') %}
        <div class="alert alert-success">
            <i class="fa fa-refresh icon-left"></i>
            {{ l.slideshow_refresh_player_success|replace('%time%', request.args.get('refresh_player')) }}
        </div>
    {% endif %}

    <div class="explorer">
        {% if PLAYLIST_ENABLED %}
        <div class="left">
            <div class="panel panel-menu">
                <div class="panel-body">
                    <h3>
                        {{ l.slideshow_playlist_panel_title }}
                    </h3>
                    <ul>
                        <li class="{% if not current_playlist %}active{% endif %}">
                            <a href="{{ url_for('slideshow_slide_list') }}" class="select-playlist">
                                {% if not current_playlist %}
                                    <i class="fa fa-play icon-left"></i>
                                {% endif %}
                                {{ l.slideshow_playlist_panel_item_default }}
                            </a>
                        </li>
                        {% for playlist in playlists %}
                            <li class="{% if current_playlist %}active{% endif %}">
                                <a href="{{ url_for('slideshow_slide_list_playlist_use', playlist_id=playlist.id) }}" class="select-playlist">
                                    {% if current_playlist %}
                                        <i class="fa fa-play icon-left"></i>
                                    {% endif %}
                                    {{ playlist.name }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="right">
            <div class="panel {% if PLAYLIST_ENABLED %}panel-active{% endif %}">
                <div class="panel-body">
                    <h3>{{ l.slideshow_slide_panel_active }}</h3>

                    {% with tclass='active', slides=enabled_slides %}
                        {% include 'slideshow/component/table.jinja.html' %}
                    {% endwith %}
                </div>
            </div>
            <div class="panel panel-inactive">
                <div class="panel-body">
                    <h3>{{ l.slideshow_slide_panel_inactive }}</h3>

                    {% with tclass='inactive', slides=disabled_slides %}
                        {% include 'slideshow/component/table.jinja.html' %}
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>

    <div class="modals hidden">
        <div class="modals-outer">
            <a href="javascript:void(0);" class="modal-close">
                <i class="fa fa-close"></i>
            </a>
            <div class="modals-inner">
                {% include 'slideshow/modal/add.jinja.html' %}
                {% include 'slideshow/modal/edit.jinja.html' %}
                {% include 'slideshow/modal/utrack.jinja.html' %}
            </div>
        </div>
    </div>
{% endblock %}