{% extends "base_juice.html" %}

{% block content %}
<div class="block">
    <div class="d-flex justify-content-between align-items-center">
        <h1>Service Logs {{ hint_widget }}</h1>
        <div>{{ embed(roots.refresh_button) }}</div>
    </div>
    <form class="row gx-1">
        <div class="col-md-auto">
            <label>Time range ({{ timezone }})</label>
            <div style="display: flex;">
                <div>{{ embed(roots.time_range_select) }}</div>
                <div>{{ embed(roots.date_range_picker) }}</div>
            </div>
        </div>
        <div class="col-md-auto">
            <label>Level</label>
            <div>{{ embed(roots.level_select) }}</div>
        </div>
        <div class="col-md-auto">
            <label>Services</label>
            <div>{{ embed(roots.multichoice_service) }}</div>
        </div>
        <div class="col-md-auto">
            <label>Search</label>
            <div>{{ embed(roots.search_input) }}</div>
        </div>
        <div class="col-md-auto">
            {{ embed(roots.warning) }}
        </div>
    </form>
    {{ embed(roots.status) }}
    {{ embed(roots.logs_table) }}
</div>

<style>
    form label {
        margin-left: 5px;
    }
</style>
{% endblock %}