{% import "shelf-library-modal-macros.html" as macros %}
<div class="modal-dialog">
    <div class="modal-content modal_file_selector" style='border-radius: 0px'>
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="fa fa-times fa-lg"></i></button>
            <h1 class="modalBiblio--title">{{ _gettext("Choose") }}</h1>
            <div class="modalBiblio--arborescence">
                <span>{{ _gettext("Root") }}</span><span>{{ dir_path }}</span>
            </div>
        </div>
        {% if dir_path %}
        <a class="modalBiblio--backParent xhr_link" href="{{ get_dir_url('.modal_iconic_index', parent_path)|safe }}"><i class="fa fa-arrow-circle-o-left"></i>Dossier parent</a>
        {% endif %}
        <div class="modal-body" style="padding: 0px; overflow: hidden">
            <div style="background-color: #ffffff" class="row model-list model-icone">
                {% set icons_by_mime = {'image': 'fa-picture-o', 'text': 'fa-file-text', 'video': 'fa-film', 'other': 'fa-file', 'archive': 'fa-save'} %}
                {% for name, path, is_dir, size, dimensions in items %}
                    {% if is_dir %}
                        <div class="col-xs-6">
                            <a href="{{ get_dir_url('.modal_iconic_index', path)|safe }}" class="thumbnail xhr_link">
                                    <i class="fa fa-folder"></i>
                                    <div class="caption">
                                        <span>{{ name }}</span>
                                        <br><span class="detail"><!--(nombre de sous-éléments)--></span>
                                    </div>
                            </a>
                        </div>
                    {% elif mimes[path] == "image" %}
                        <div class="files files--image col-xs-6 modal_file_element" data-url="{{ get_file_url(path)|safe }}" data-path="{{ path }}"{% if dimensions[0] %} data-width="{{ dimensions[0] }}" data-height="{{ dimensions[1] }}"{% endif %}>
                            <div style="vertical-align: bottom;" class="thumbnail">
                                <img src="{{ url_for('images.fit', filename=('media/' + path).encode('utf-8'), width=250, height=72)|safe }}">
                                <div class="caption">
                                    <span class="link-file">
                                        <span>{{ name }}</span>
                                        <span class="detail">{{ size }}{% if dimensions[0] %}, {{ dimensions[0] }}&times;{{ dimensions[1] }}&nbsp;px{% endif %}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="files col-xs-6 modal_file_element" data-url="{{ get_file_url(path)|safe }}" data-path="{{ path }}">
                            <div class="thumbnail">
                                    <i class="fa fa-file"></i>
                                    <div class="caption">
                                        <span class="link-file"><span>{{ name }}</span><span class="detail">{{ size }}</span></span>
                                    </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {{ macros.library_modal_footer(dir_path) }}
    </div>
</div>