<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>
    <h1 class="text-center">plyder <small class="text-muted">v{{ version }}</small></h1>

    <h2 class="text-left">Add new package</h2>
    <div class="container">
        <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>

    <hr>

    <h2 class="text-left">Existing packages</h2>
    <div class="container">
    {% for package in package_list %}
        <div class="border rounded m-3 p-1">
            <h3>
                {{ package.name }}

                {% if package.info.status == "done" %}
                    <span class="badge rounded-pill bg-success">Done</span>
                {% elif package.info.status == "running" %}
                    <span class="badge rounded-pill bg-info">Running</span>
                {% elif package.info.status == "failed" %}
                    <span class="badge rounded-pill bg-danger">Failed</span>
                {% elif package.info.status == "unknown" %}
                    <span class="badge rounded-pill bg-dark">Unknown</span>
                {% endif %}
            </h3>

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