{% load filex %}

<div id="filex">
    <nav aria-label="Pasek narzędzi nawigacyjnych">
        <div id="host">
            <div class="list">
                <label for="host-selector" class="sr-only">Wybierz host</label>
                <select id="host-selector"></select>
            </div>
            <button id="btn-host" type="button" class="btn btn-default"></button>
        </div>

        <div id="controls">
            <button id="btn-refresh" type="button" class="btn btn-default" title="Odśwież">
                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
            </button>

            <button id="btn-favorites" type="button" class="btn btn-default" title="Ulubione" data-toggle="button" data-loading-text="Zapisywanie..." aria-pressed="false">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>

            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default">
                    <input id="show-hidden" type="checkbox" autocomplete="off"> Pokaż ukryte
                </label>
            </div>
        </div>

        <div id="path">
            <ol class="breadcrumb path"></ol>
        </div>
    </nav>

    <div id="list">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="text-center" style="width: 40px">
                        <label for="select-all" class="sr-only">Wybierz wszystkie pliki</label>
                        <input id="select-all" type="checkbox" autocomplete="off">
                    </th>
                    <th style="width: 40px"></th>
                    <th>Nazwa</th>
                    <th style="width: 120px">Rozmiar</th>
                    <th style="width: 200px">Data</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <div id="no-items" class="alert alert-info" hidden>
            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
            Brak elementów
        </div>

        <div id="error" class="alert alert-danger" hidden>
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="msg"></span>
        </div>
    </div>

    <div id="spinner-overlay"></div>
</div>

<form id="favorite-form" action="{% url 'filex:fav_add' %}" class="modal fade form-horizontal" tabindex="-1" role="dialog" aria-labelledby="favorite-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="favorite-modal-label">Dodaj lokalizację do ulubionych</h4>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                {% fav_form %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                <button type="submit" class="btn btn-primary" data-loading-text="Zapisywanie..." data-error-text="Błąd serwera">OK</button>
            </div>
        </div>
    </div>
</form>