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

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

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

{% block add_js %}
    <script src="{{ STATIC_PREFIX }}js/lib/jquery-explr-1.4.js"></script>
    <script src="{{ STATIC_PREFIX }}js/slideshow/contents.js"></script>
    {{ HOOK(H_SLIDESHOW_CONTENT_JAVASCRIPT) }}
{% endblock %}

{% block body_class %}view-content-list{% endblock %}

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

        <div class="top-actions">
            {{ HOOK(H_SLIDESHOW_CONTENT_TOOLBAR_ACTIONS_START) }}
            <button class="folder-add btn-success-alt">
                <i class="fa fa-folder-plus"></i>
            </button>
            <button class="content-add item-add">
                <i class="fa fa-file-circle-plus icon-left"></i>
                {{ l.slideshow_content_button_add }}
            </button>
            {{ HOOK(H_SLIDESHOW_CONTENT_TOOLBAR_ACTIONS_END) }}
        </div>
    </div>

{#    <div class="alert alert-info">#}
{#        <i class="fa fa-warning"></i> Ceci est une alerte d'info#}
{#    </div>#}

    <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>
                    {% if loop.last %}
                        <span>
                            <i class="explr-icon explr-icon-folder"></i>
                            {{ dir }}
                        </span>
                    {% else %}
                        <a href="{{ url_for('slideshow_content_cd', path=ns.breadpath) }}">
                            <i class="explr-icon explr-icon-folder"></i>
                            {{ dir }}
                        </a>
                    {% endif %}

                </li>
                {% if not loop.last %}
                    <li class="divider">
                        <i class="fa fa-chevron-right"></i>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>

    <div class="bottom-content">
        <div class="page-panel left-panel">

            {% macro render_folder(folder) %}
                <li class="icon-folder">
                    <a href="{{ url_for('slideshow_content_cd') }}?path={{ folder.path }}" class="{% if folder.path == working_folder_path %}active{% endif %}">
                        {{ folder.name }}
                    </a>
                    {% set content_children = contents[folder.id]|default([]) %}

                    {% if folder.children or content_children %}
                        <ul>
                            {% for child in folder.children %}
                                {{ render_folder(child) }}
                            {% endfor %}
                            {% for content in content_children  %}
                                {% set icon = 'icon-folder' %}
                                {% if content.type.value == 'picture' %}
                                    {% set icon = 'icon-landscape' %}
                                {% elif content.type.value == 'video' %}
                                    {% set icon = 'icon-video' %}
                                {% elif content.type.value == 'url' %}
                                    {% set icon = 'icon-chain' %}
                                {% elif content.type.value == 'youtube' %}
                                    {% set icon = 'icon-youtube' %}
                                {% endif %}

                                <li class="{{ icon }}">
                                    <a href="{{ url_for('slideshow_content_show', content_id=content.id) }}" target="_blank">
                                        {{ content.name }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endmacro %}

            <ul class="explr hidden" id="tree">
                {{ render_folder(folders_tree) }}
            </ul>
        </div>



        <div class="page-content">
            <div class="dirview">
                <ul>
                    {% for folder in working_folder_children %}
                        <li>
                            <a href="{{ url_for('slideshow_content_cd', path=working_folder_path~'/'~folder.name) }}">
                                <i class="fa fa-folder"></i>
                                {{ folder.name }}
                            </a>
                        </li>
                    {% endfor %}

                    {% for content in contents[working_folder.id]|default([]) %}
                        {% set icon = 'fa-file' %}
                        {% if content.type.value == 'picture' %}
                            {% set icon = 'fa-image' %}
                        {% elif content.type.value == 'video' %}
                            {% set icon = 'fa-film' %}
                        {% elif content.type.value == 'url' %}
                            {% set icon = 'fa-globe' %}
                        {% elif content.type.value == 'youtube' %}
                            {% set icon = 'fa-video' %}
                        {% endif %}

                        <li>
                            <a href="{{ url_for('slideshow_content_show', content_id=content.id) }}" target="_blank">
                                <i class="fa {{ icon }}"></i>
                                {{ content.name }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </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/contents/modal/add.jinja.html' %}
                        {% include 'slideshow/contents/modal/edit.jinja.html' %}
                        {% include 'core/utrack.jinja.html' %}
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}