{% extends "layout.html" %}
{% set active_page = "directory" %}

{% block title %}Directory list{% endblock title %}

{% block body %}
    <div class="container">

        {# Add directory form #}
        <div class="card">
            <div class="card-header">Add a directory</div>
            <div class="card-body">

                <form method="GET" action="/directory/add">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Display name" name="name">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Absolute path" name="path">
                    </div>
                    <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i> Add directory</button>
                </form>

            </div>
        </div>

        {# List of directories #}
        <div class="card">
            <div class="card-header">Directory list</div>
            <div class="card-body">

                <table class="info-table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Path</th>
                        <th>Enabled</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for dir in directories %}
                        <tr>
                            <td>{{ directories[dir].name }}</td>
                            <td style="word-break: break-all"><pre>{{ directories[dir].path }}</pre></td>
                            <td><i class="far {{ "fa-check-square" if directories[dir].enabled else "fa-square" }}"></i></td>
                            <td><a href="directory/{{ dir }}" class="btn btn-primary"><i class="fas fa-cog"></i> Manage</a> </td>
                        </tr>
                    {% endfor %}
                    </tbody>

                </table>

            </div>
        </div>
    </div>
{% endblock body %}