{% set badge_types = {
    "done": "bg-success",
    "running": "bg-info",
    "failed": "bg-danger",
    "unknown": "bg-dark"
} %}

{% macro status_badge(status) -%}
    <span class="badge rounded-pill {{ badge_types[status] }}">
        {{ status }}
    </span>
{%- endmacro %}

{% macro status_count_badge(status) -%}
    {% set status_count = package_list|selectattr("info.status", "equalto", status)|list|length %}

    {% if status_count > 0%}
        <span class="float-end badge rounded-pill {{ badge_types[status] }}">
            {{ status_count }}
        </span>
        <span class="float-end">&ensp;</span>
    {% endif %}
{%- endmacro %}


<html>
<head>
    <title>plyder v{{ version }}</title>

    <link href="{{ url_for('static', path='/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">

    <script src="{{ url_for('static', path='/axios.min.js') }}"></script>
</head>
<body>
    <div class="container">
        <h1 class="text-center">plyder <span class="text-muted" style="font-size:0.6em">v{{ version }}</span></h1>

        <hr>

        <div class="row">
            <div class="col">
                <div class="sticky-top">
                    <div class="row">
                        <h2 class="text-left">Server Info</h2>

                        <table id ="server_info_table" class="table table-striped table-borderless table-sm ">
                            <tbody>
                                <tr>
                                    <td> Download Directory </td>
                                    <td> {{ server_info.download_directory }} </td>
                                </tr>
                                <tr>
                                    <td> Disk Usage </td>
                                    <td> {{ server_info.disk_usage.used }} / {{ server_info.disk_usage.total }} </td>
                                </tr>
                                <tr>
                                    <td> Memory </td>
                                    <td> {{ server_info.process.memory }} % </td>
                                </tr>
                                <tr>
                                    <td> CPU </td>
                                    <td> {{ server_info.process.cpu }} % </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <hr>

                    <div class="row">
                        <h2 class="text-left">Add new package</h2>
                        <div class="mb-3">
                            <label for="package_name" class="form-label">Package Name:</label>
                            <input type="text" class="form-control" id="package_name">
                        </div>

                        <div class="mb-3">
                            <label for="url_field" class="form-label">URL field:</label>
                            <textarea class="form-control" id="url_field" aria-describedby="url_field_help"></textarea>
                            <div id="url_field_help" class="form-text">Separate multiple URLs by newlines</div>
                        </div>

                        <button onclick="submitJob()" class="btn btn-primary">Add</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <h2 class="text-left">
                    Existing packages

                    {# reverse order due to float-end #}
                    {{ status_count_badge("unknown") }}
                    {{ status_count_badge("failed") }}
                    {{ status_count_badge("running") }}
                    {{ status_count_badge("done") }}
                </h2>

                {% for package in package_list %}
                    <div class="border rounded m-3 p-1">
                        <span class="text-muted float-end" style="font-size:0.7em"> {{ package.info.start_time }} -- {{ package.info.end_time|d('?') }} </span>

                        <h3>
                            {{ package.name }}

                            {% if package.info.status == "done" %}
                                {{ status_badge("done") }}
                            {% elif package.info.status == "running" %}
                                {{ status_badge("running") }}
                            {% elif package.info.status == "failed" %}
                                {{ status_badge("failed") }}
                            {% elif package.info.status == "unknown" %}
                                {{ status_badge("unknown") }}
                            {% endif %}
                        </h3>

                        <textarea class="log-field form-control" readonly placeholder="{{ package.log }}" rows="10"></textarea>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <script>
        function submitJob() {
            return axios.post("/submit_job", {
                package_name: document.getElementById("package_name").value,
                url_field: document.getElementById("url_field").value
            }, {
                headers: {
                    "Content-type": "application/json",
                }
            }).then((response) => {
                console.log(response)
                window.location.href = window.location.href
            }).catch((error) => {
                console.log(error)
            })
        }

        let logAreaList = document.getElementsByClassName("log-field")
        for (let logArea of logAreaList) {
            logArea.scrollTop = logArea.scrollHeight
        }
    </script>
</body>
</html>
