{% extends 'base.html' %}
{% block head %}
    {{ block.super }}
    <style>
        .panel-icon {
            margin-right: 1em;
        }

        .tag:not(body) {
            font-size: 0.7rem;
            line-height: 1.3;
            padding: 0 0.6em;
        }
    </style>
{% endblock head %}
{% block content %}
    <div class="panel">
        <div class="panel-heading">Directories</div>
        {% if directories|length > 0 %}
            {% for served_directory in directories %}
                <div class="panel-block">
                    <span class="panel-icon">
                        <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
                    </span>
                    <a href="{% url 'browse' served_directory.id %}">
                        {{ served_directory.path }}
                        {% if served_directory.regex %}
                            <span class="tag is-info">Filtered</span>
                        {% endif %}
                    </a>
                    <a href="{% url 'delete' served_directory.id %}">
                        <span class="icon has-text-danger">
                            <i class="fas fa-times fa-lg" aria-hidden="true"></i>
                        </span>
                    </a>
                </div>
            {% endfor %}
        {% else %}
            <div class="panel-block">
                <p>
                    No directories available.
                </p>
            </div>
        {% endif %}
    </div>
{% endblock content %}