{% 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 %}page-content{% 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="purple content-add item-add">
                <i class="fa fa-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="bottom-content">
        <div class="page-panel left-panel">

            <ul class="explr" id="tree">

                <li>
                    <a href="#">/</a>
                    <ul>
                        <li>
                            <a href="#">home</a>
                            <ul>
                                <li>
                                    <a href="#">pictures</a>
                                    <ul>
                                        <li>
                                            <a href="#">test.jpg</a>
                                        </li>
                                        <li>
                                            <a href="#">lost.jpg</a>
                                        </li>
                                        <li>
                                            <a href="#">shark.jpg</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>


        <div class="page-content">

            <div class="panel">
                <div class="panel-body">
                    <h3>{{ l.slideshow_content_panel_active }}</h3>



                    div.explr-

{#                    {% with tclass='active', contents=contents %}#}
{#                        {% include 'slideshow/contents/component/table.jinja.html' %}#}
{#                    {% endwith %}#}
                </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/contents/modal/add.jinja.html' %}
                        {% include 'slideshow/contents/modal/edit.jinja.html' %}
                        {% include 'core/utrack.jinja.html' %}
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}