{% extends '@KunstmaanMedia/Default/layout.html.twig' %}


{% block body %}
    {% set lowestTopChild = foldermanager.getRootFolderFor(folder) %}
    {% if lowestTopChild %}
        {% set navigationChildren = foldermanager.getFolderHierarchy(lowestTopChild) %}
    {% endif %}
    {{ parent() }}
{% endblock %}



{% block sidebar %}
    <!-- Search -->
    <button type="button" class="js-toggle-btn toggle-button btn app__sidebar__search-toggle-btn" data-target="#sidebar-search-toggle">
        <i class="fa fa-search"></i>
    </button>
    <div id="sidebar-search-toggle" class="toggle-item">
        <div class="toggle-item__content">
            <div class="app__sidebar__search-toggle-item">
                <input type="text" placeholder="{{ 'Search' | trans }}" id="app__sidebar__search" class="form-control">
                <hr>
            </div>
        </div>
    </div>

    <!-- Tree -->
    <nav role="navigation" id="app__sidebar__navigation" class="app__sidebar__module app__sidebar__navigation" data-reorder-url="{{ path('KunstmaanMediaBundle_folder_reorder') }}">
        <ul>
            {% set parentIds = foldermanager.getParentIds(folder) %}
            {% set rootFolder = foldermanager.getRootFolderFor(folder) %}
            {% set folders = foldermanager.getFolderHierarchy(rootFolder) %}
            {% for mediaFolder in folders %}
                {% include '@KunstmaanMedia/Folder/foldertreeview.html.twig' %}
            {% endfor %}
        </ul>
    </nav>
{% endblock %}



{% block breadcrumb %}
    {% include '@KunstmaanMedia/Folder/breadcrumbs.html.twig' %}
{% endblock %}



{% block header %}
    <h1 class="app__content__header__title">
        {{ 'media.media.title'|trans }}
        <small class="app__content__header__title__small">
            {{ media.name }}
        </small>
    </h1>
{% endblock %}



{% block content %}
    <!-- Main-actions -->
    <div class="page-main-actions js-auto-collapse-buttons">
        <div class="btn-group" role="group">
            {% block extraactions %}{% endblock %}
            {% block actions %}
                <button data-target="#sure-modal-{{ media.id }}" data-toggle="modal" class="btn btn-default btn--raise-on-hover">
                    {{ 'form.delete'|trans }}
                </button>
            {% endblock %}
        </div>
    </div>


    <!-- Scroll-actions -->
    <div class="page-main-actions page-main-actions--top" id="page-main-actions-top">
        <div class="btn-group">
            {{ block('extraactions') }}
            {{ block('actions') }}
            <a href="#" class="btn btn-default">
                <i class="fa fa-caret-up"></i>
            </a>
        </div>
    </div>


    <!-- Main Tabs -->
    <ul class="nav nav-tabs page-main-tabs js-auto-collapse-tabs">
        <li class="active">
            <a href="#imagegallery" data-toggle="tab">
                {{ 'media.media.contenttab.title'|trans|capitalize }}
            </a>
        </li>
        <li>
            <a href="#properties" data-toggle="tab">
                {{ 'media.media.propertiestab.title' | trans }}
            </a>
        </li>
        <li class="tab__more dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                {{ 'form.button.dropdown.more' | trans }} <span class="caret"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right" id="collapsed"></ul>
        </li>
    </ul>

    <div class="tab-content">

        <!-- TAB - Imagegallery -->
        <div class="tab-pane active" id="imagegallery">

            <div class="row row--padded">
                <div class="col-md-6 col-lg-5">
                    <dl>
                        {% block mediainfo %}
                            <dt>{{ 'media.media.mediainfo.name'|trans }}:</dt>
                            <dd>{{ media.name }}</dd>
                            <dt>{{ 'media.media.mediainfo.contenttype'|trans }}:</dt>
                            <dd>{{ media.contentType }}</dd>

                            {% set originalWidth = media.metadata.original_width|default %}
                            {% if originalWidth %}
                                <dt>{{ 'media.media.mediainfo.width'|trans }}:</dt>
                                <dd>{{ originalWidth }}px</dd>
                            {% endif %}

                            {% set originalHeight = media.metadata.original_height|default %}
                            {% if originalHeight %}
                                <dt>{{ 'media.media.mediainfo.height'|trans }}:</dt>
                                <dd>{{ originalHeight }}px</dd>
                            {% endif %}

                            <dt>{{ 'media.media.mediainfo.createdat'|trans }}:</dt>
                            <dd>{{ media.createdat|date|escape }}</dd>
                            <dt>{{ 'media.media.mediainfo.updatedat'|trans }}:</dt>
                            <dd>{{ media.updatedat|date|escape }}</dd>
                        {% endblock %}
                    </dl>
                </div>

                <div class="col-md-6 col-lg-7">
                    {% block preview %}{% endblock %}
                </div>
            </div>
        </div>


        <!-- TAB - Properties -->
        <div class="tab-pane" id="properties">

            {% form_theme editform '@KunstmaanAdmin/Form/fields.html.twig' %}
            {{ form_start(editform, {'method': 'POST', 'action': path('KunstmaanMediaBundle_media_show', { 'mediaId' : media.id }) }) }}
                <fieldset class="panel panel-default form-properties">
                    <div class="panel-body">

                        {{ form_widget(editform) }}

                        <div class="form-actions form-actions--padded">
                            <button type="submit" class="btn btn-primary btn--raise-on-hover">
                                {{ 'form.save' |trans }}
                            </button>
                            <button type="reset" class="btn btn-default btn--raise-on-hover">
                                {{ 'form.cancel' |trans }}
                            </button>
                        </div>
                    </div>
                </fieldset>
            {{ form_end(editform) }}
        </div>
    </div>


    <!-- Modals -->
    {% include '@KunstmaanMedia/Media/delete-modal.html.twig' %}

{% endblock %}