{% extends "layout.html" %}

{% block title %}An excellent title{% endblock title %}

{% block body %}

    <div class="container">

        <div class="panel panel-default">
            <div class="panel-heading">An excellent form</div>
            <div class="panel-body">
                <form class="form-inline" action="/task/add">
                    <label for="type">Create </label>
                    <select class="form-control" id="type" name="type" >
                        <option value="1">Indexing</option>
                        <option value="2">Thumbnail Generation</option>
                    </select>

                    <label for="directory">task for</label>
                    <select class="form-control" id="directory" name="directory" >
                        {% for dir_id in directories %}
                            <option value="{{ dir_id }}">{{ directories[dir_id].name }}</option>
                        {% endfor %}
                    </select>

                    <input type="submit" class="form-control btn btn-success" value="Add">
                </form>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">An excellent panel</div>
            <div class="panel-body">

                <table class="info-table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>Task type</th>
                        <th>Directory</th>
                        <th>Completed</th>
                        <th>Action</th>
                    </tr>
                    </thead>

                    <tbody>
                    {% for task_id in tasks %}

                        <tr>
                            <td>{{ tasks[task_id].type }}</td>
                            <td>{{ directories[tasks[task_id].dir_id].name }}</td>
                            <td>{{ tasks[task_id].completed }}</td>
                            <td><a class="btn btn-danger" href="/task/{{ task_id }}/del">Cancel</a></td>
                        </tr>

                    {% endfor %}
                    </tbody>

                </table>



            </div>
        </div>

    </div>

{% endblock body %}