{% extends 'admin/master.html' %}
{% import 'admin/lib.html' as admin_lib with context %}
{% import 'shelf/lib.html' as lib with context %}
{% import 'shelf/actions.html' as actionlib with context %}

{% block body %}
<div class="row" style="margin-top: 50px; background-color: #ffffff">
        <div class="col-xs-12" style="padding: 0px; padding-bottom: 15px; padding-top: 5px; padding-left: 25px;">
            {% if dir_path %}
                <h1>/{{ dir_path.upper() }}</h1>
            {% else %}
                <h1>{{ admin_view.name.upper() }}</h1>
            {% endif %}
        </div>
    <div class="col-xs-12" style="padding: 0px; padding-bottom: 15px; overflow: hidden">
  {% block file_list_table %}
        <table class="table model-list" style="border-top: 1px solid #ddd">
            <thead>
                <tr>
                    {% block list_header scoped %}
                    {% if actions %}
                    <th class="span1 center" style="padding-left: 25px">
                        <input type="checkbox" name="rowtoggle" class="action-rowtoggle" />
                    </th>
                    {% endif %}

                    <th>Name</th>
                    <th>Size</th>
                    <th class="span1">&nbsp;</th>
                    {% endblock %}
                </tr>
            </thead>
            {% for name, path, is_dir, size in items %}
            <tr>
                {% block list_row scoped %}
                {% if actions %}
                <td class="center" style="padding-left: 25px">
                    {% if not is_dir %}
                    <input type="checkbox" name="rowid" class="action-checkbox" value="{{ path }}" />
                    {% endif %}
                </td>
                {% endif %}
                
            {% if is_dir %}
            <td colspan="2">
                <i style="width: 20px" class="fa fa-folder"></i> <a href="{{ get_dir_url('.index', path)|safe }}"><span class="filename">{{ name }}</span>
                </a>
            </td>
            {% else %}
            <td>
                {% set icons_by_mime = {'image': 'fa-picture-o', 'text': 'fa-file-text', 'video': 'fa-film', 'other': 'fa-file', 'archive': 'fa-save'} %}
                <i style="width: 20px" class="fa {{ icons_by_mime[mimes[path]] }}"></i> <a href="{{ get_file_url(path)|safe }}" target="_new"><span class="filename">{{ name }}</span>
                </a>
            </td>
            <td>
                {{ size }}
            </td>
            {% endif %}
            <td class="center">
                {% block list_row_actions scoped %}
                {% if admin_view.can_rename and path and name != '..' %}
                <a class="icon rename" href="{{ url_for('.rename', path=path) }}">
                        <i class="fa fa-pencil fa-lg"></i>
                </a>
                {% endif %}
                {%- if admin_view.can_delete and path -%}
                    {% if is_dir %}
                        {% if name != '..' and admin_view.can_delete_dirs %}
                        <form class="icon" method="POST" action="{{ url_for('.delete') }}?url={% if dir_path %}{{ url_for('.index', path=dir_path) }}{% else %}{{ url_for('.index') }}{% endif %}">
                            <input type="hidden" name="path" value="{{ path }}"></input>
                            <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\' recursively?', name=name) }}')">
                                <i class="fa fa-times-circle fa-lg"></i>
                            </button>
                        </form>
                        {% endif %}
                    {% else %}
                    <form class="icon" method="POST" action="{{ url_for('.delete') }}?url={% if dir_path %}{{ url_for('.index', path=dir_path) }}{% else %}{{ url_for('.index') }}{% endif %}">
                        <input type="hidden" name="path" value="{{ path }}"></input>
                        <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\'?', name=name) }}')">
                            <i class="fa fa-times-circle fa-lg"></i>
                        </button>
                    </form>
                    {% endif %}
                {%- endif -%}
                {% endblock %}
            </td>
                {% endblock %}
            </tr>
            {% endfor %}
        </table>
        {% endblock %}
        </div>
    </div>
    {% if dir_path %}
        {{ actionlib.form(actions, url_for('.action_view') + "?url=" + url_for('.index', path=dir_path)) }}
    {% else %}
        {{ actionlib.form(actions, url_for('.action_view') + "?url=" + url_for('.index')) }}
    {% endif %}
    <div class="modal fade" id="dir-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times fa-lg"></i></button>
                    <h1>NEW DIRECTORY</h1>
                </div>
                <div class="modal-body" style="padding: 0px; overflow: hidden">
                    {% if dir_path %}
                    <form method="post" class="form-inline" style="margin: 15px" action="{{ url_for('.mkdir', path=dir_path) }}">
                    {% else %}
                    <form method="post" class="form-inline" style="margin: 15px" action="{{ url_for('.mkdir') }}">
                    {% endif %}                    
                        <label for="name" class="control-label">Name</label>
                            <input class="form-control" type="text" id="name" name="name" />
                    </form>
                    <div style="height: 37px; width: 100%; padding: 0px; background-color: #ff9d98">                    
                    <ul class="nav nav-pills pull-right" style="display: inline-block; background-color: #ef8580">
                        <li class="actions validate">
                            <a href="javascript:void(0)" style="color: #fff"><i class="fa fa-check"></i>  Validate</a>
                        </li>
                        <li class="actions cancel">
                            <a href="javascript:void(0)" style="color: #fff"><i class="fa fa-times"></i>  Cancel</a>
                        </li>
                        
                    </ul>
                    
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="ren-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times fa-lg"></i></button>
                    <h1>{{ _('RENAME') }}</h1>
                </div>
                <div class="modal-body" style="padding: 0px; overflow: hidden">
                    <form method="post" class="form-inline" style="margin: 15px" action="{{ url_for('.rename') }}">
                        <label for="name" class="control-label">Name</label>
                        <input class="form-control" type="text" id="name" name="name" />
                        <input type="hidden" name="path" value="" />
                    </form>
                    <div style="height: 37px; width: 100%; padding: 0px; background-color: #ff9d98">                    
                    <ul class="nav nav-pills pull-right" style="display: inline-block; background-color: #ef8580">
                        <li class="actions validate">
                            <a href="javascript:void(0)" style="color: #fff"><i class="fa fa-check"></i>  Validate</a>
                        </li>
                        <li class="actions cancel">
                            <a href="javascript:void(0)" style="color: #fff"><i class="fa fa-times"></i>  Cancel</a>
                        </li>
                        
                    </ul>
                    
                </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block page_body %}
    {{ super() }}
    {% call lib.navbar(_("FILES"), pos="bottom") %}
        {% block model_menu_bar %}
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-th fa-lg"></i>  Layout</a>
                <ul class="dropdown-menu">
                    {% if dir_path %}
                    <li><a href="{{ url_for('.index', path=dir_path) }}">List</a></li>
                    <li><a href="{{ url_for('.icon_index', path=dir_path) }}">Icons</a></li>
                    {% else %}
                    <li><a href="{{ url_for('.index') }}">List</a></li>
                    <li><a href="{{ url_for('.icon_index') }}">Icons</a></li>
                    {% endif %}
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            {% if admin_view.can_upload %}
            <li class="actions">
                <a href="{{ get_dir_url('.upload', path=dir_path) }}"><i class="fa fa-download"></i>  Upload File</a>
            </li>
            {% endif %}
            {% if admin_view.can_mkdir %}
            <li class="actions new">
                <a href="javascript:void(0)"><i class="fa fa-folder"></i>  New directory</a>
            </li>
            {% endif %}
            {% if actions %}
            <li class="actions delete disabled">
                <a href="javascript:void(0)" onclick="return modelActions.execute('{{ actions[0][0] }}');"><i class="fa fa-trash-o"></i>  {{ _gettext(actions[0][1]) }}</a>
            </li>
            {% endif %}
        </ul>
        {% endblock %}
    {% endcall %}
{% endblock %}
        
{% block tail %}
    {{ super() }}
    {{ admin_lib.form_js() }}
    
    <script src="{{ url_for('admin.static', filename='admin/js/filters.js') }}"></script>

    {{ actionlib.script(_gettext('Please select at least one model.'),
                      actions,
                      actions_confirmation) }}

     <script language="javascript">
        (function($) {
            $('[data-role=tooltip]').tooltip({
                html: true,
                placement: 'bottom'
            });
           
            $('.navbar-fixed-bottom .dropdown-menu').click(function (e) {
                e.stopPropagation();
            });

            $('.navbar-fixed-bottom .filter-menu > .dropdown-menu a').click(function (e) {
                var target = $(e.currentTarget).parent();
                if (target.hasClass('active'))
                {
                    target.removeClass('active');
                }
                else
                {
                    target.addClass('active');
                }
            });

            $('li.actions.new').click(function () {
                $('#dir-modal').modal('show');
            });

            $('.model-list tbody tr').click(function (e) {
                if ($('.model-list tbody tr.selected').length > 0) {
                    $("li.actions.delete").removeClass('disabled');
                }
                else {
                    $("li.actions.delete").addClass('disabled');
                }
            });

            $('.model-list thead input.action-rowtoggle').change(function (e) {
                if ($(this).prop("checked") == true)
                {
                    $('.model-list tbody input.action-checkbox').closest('tr').addClass('selected');
                    $('.model-list tbody input.action-checkbox').prop("checked", true);
                }
                else 
                {
                    $('.model-list tbody tr').closest('tr').removeClass('selected');
                    $('.model-list tbody input.action-checkbox').prop("checked", false);
                }

                if ($('.model-list tbody tr.selected').length > 0)
                    $("li.actions.delete").removeClass('disabled');
                else
                    $("li.actions.delete").addClass('disabled');
                
            });

            $('.modal li.actions.cancel').click(function() {
                $(this).closest('.modal').modal('hide');
            });

            $('.modal li.actions.validate').click(function() {
                $(this).closest('.modal').modal('hide');
                $(this).closest('.modal').find('form').submit();
            });

            $('a.rename').click(function(event)
            {
                event.preventDefault();
                event.stopPropagation();
                $('#ren-modal').modal('show');
                $('#ren-modal input#name').val($(this).closest('tr').find('span.filename').html());
                {% if dir_path %}
                    $('#ren-modal form input[type=hidden][name=path]').val("{{ dir_path }}/" + $(this).closest('tr').find('span.filename').html());
                    $('#ren-modal form').attr('action', "{{ url_for('.rename') }}" + "?path={{ dir_path }}/" + $(this).closest('tr').find('span.filename').html());
                {% else %}
                    $('#ren-modal form input[type=hidden][name=path]').val($(this).closest('tr').find('span.filename').html());
                    $('#ren-modal form').attr('action', "{{ url_for('.rename') }}" + "?path=" + $(this).closest('tr').find('span.filename').html());
                {% endif %}
                
            })
        })(jQuery);
    </script>
{% endblock %}
