{% extends 'global/pages/base.html' %}

{% block title %}{{ title }} |{% endblock title %}

{% block content %}

    <div class="font-robo custom-container">
        <div class="dash-content">
            <div class="custom-card">
                <h1>Descrição</h1>

                <table class="table table-sm striped table-nowrap">
                    <thead>
                        <tr>
                            <th class="th-sm"></th>
                            <th class="th-sm"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="col-sm">
                            <th scope="row" class="sm">Identificador</th>
                            <td>{{ task.task_id }}</td>
                        </tr>
                        <tr class="col-sm">
                            <th scope="row" class="sm">Tipo</th>
                            <td>{{ task.task_name }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="custom-card">
                <h1>Progresso</h1>
                
                <span id="execution-message"></span>

                <div class="progress">
                    <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar">&nbsp;</div>
                </div>
                
                <div id="progress-bar-status">
                    Esperando a tarefa iniciar...
                </div>

                {% if task.status in 'Progresso Pendente' %}
                    <div id="revoke_task" class="a-right p-t-15">
                        <a href="{% url 'dashboard:revoke_task' task.task_id %}" class="btn btn-basic btn-danger btn-radius">
                            Cancelar
                        </a>
                    </div>
                {% endif %}
            </div>

           {% include 'dashboard/partials/task_parameters_card.html' %}

            <div class="custom-card">
                <h1>Resultados</h1>
                
                <div id="task-result">
                    <span>
                        Se tudo ocorrer bem, os resultados aparecerão aqui após a execução.
                    </span>
                </div>
            </div>
        </div>
    </div>

{% endblock content %}

{% block scripts %}

    {% load static %}
    <script src="{% static 'celery_progress/celery_progress.js' %}"></script>
    <script src="{% static 'dashboard/js/progress.js' %}"></script>

    <script>
        let progressURL = "{% url 'dashboard:task_progress' task.task_id %}"
        let resultURL = "{% url 'dashboard:task_result' task.task_id %}"

        initializeProgressBar(progressURL, resultURL)
    </script>

{% endblock scripts %}