<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReArq, A Distributed Task Queue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link href="{{ url_for('static', path='/index.css') }}" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='/favicon.svg') }}"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css">
    <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0/build/global/luxon.min.js"></script>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    </style>
    {% block head %}
    {% endblock %}
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="/">ReArq</a>
</header>
<div class="container-fluid flex-fill">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link {% if page_title == 'dashboard' %}active{% endif %}" href="/">
                        <span data-feather="home"></span>
                        Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page_title == 'worker' %}active{% endif %}" href="/worker">
                        <span data-feather="briefcase"></span>
                        Worker
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page_title == 'task' %}active{% endif %}" href="/task">
                        <span data-feather="inbox"></span>
                        Task
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page_title == 'job' %}active{% endif %}" href="/job">
                        <span data-feather="clock"></span>
                        Job
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if page_title == 'result' %}active{% endif %}" href="/result">
                        <span data-feather="file-text"></span>
                        Result
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="content d-flex flex-column h-100">
        <main class="flex-fill col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">{{ page_title|title }}</h1>
            </div>
            {% block content %}

            {% endblock %}
        </main>
    </div>
</div>
<footer class="footer ps-5 bg-light">
    <div class="container d-flex">
        <span class="text-muted py-3 flex-fill">Powered by <span
                class="fw-bold">ReArq</span> v{{ REAEQ_VERSION }}</span>
        <span class="text-muted py-3">
                    <span class="pe-3 fw-bold">Copyright © 2020-{{ NOW_YEAR }}</span>
                    <a href="https://github.com/long2ice" class="text-decoration-none pe-3">long2ice</a>
                    <a class="text-decoration-none pe-3" href="https://github.com/long2ice/rearq">Github</a>
                </span>
    </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
        integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
        crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"></script>
<script>
    feather.replace();
    const DateTime = luxon.DateTime;

    function timeFormatter(value, row) {
        let parsed = DateTime.fromSQL($.trim(value));
        if (parsed.invalid) {
            parsed = DateTime.fromISO($.trim(value));
            if (parsed.invalid) {
                return value;
            }
        }
        return parsed.toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS);
    }

    $('.time-format').each(function (index, elem) {
        let text = $(elem).text();
        let ret = timeFormatter(text);
        $(elem).text(ret);
    })
</script>
{% block body_end %}
{% endblock %}
</body>
</html>
