{% extends "base_juice.html" %}

{% block content %}
<div class="block">
    <div class="column">
        <h1> {{ page_title }} </h1>
        <h2>Service list</h2>
        {{ embed(roots.service_status_widget) }}
        <h2>Task list</h2>
        <div class="column">
            <div id="task-table-filters" class="row">
                {{ embed(roots.task_table_state_filter) }}
                {{ embed(roots.task_table_task_type_filter) }}
                {{ embed(roots.task_table_service_filter) }}
                {{ embed(roots.task_table_visibility_filter) }}
            </div>
            {{ embed(roots.task_table) }}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_resources %}
<style>
    #task-table-filters {
        margin-bottom: 10px;
        display: flex;
    }
</style>
{% endblock %}