{% load i18n %}
{% if active_tasks %}
<li id="datatask-navbar-container" class="nav-item dropdown datatask-nav-item"
    hx-get="{% url 'app_data:task_navbar_partial' %}"
    hx-trigger="every 5s"
    hx-swap="outerHTML">
    <a href="#" data-bs-toggle="dropdown" class="nav-icon pe-md-0 dropdown-toggle datatask-nav-toggle">
        <span class="datatask-label-running">{% trans "Running" %}</span>
        <span class="datatask-badge">{{ active_tasks|length }}</span>
    </a>
    <div class="dropdown-menu dropdown-menu-end datatask-dropdown">
        <h6 class="dropdown-header">{% trans "Running" %}</h6>
        {% for task in active_tasks %}
        <div class="dropdown-item datatask-item">
            <div class="datatask-name">{{ task.name }}</div>
            <div class="datatask-state datatask-state-{{ task.state|lower }}">{{ task.state }}</div>
            {% if task.progress %}
            <div class="datatask-progress-bar-wrap">
                <div class="datatask-progress-bar" style="width: {{ task.progress.percent|default:0 }}%"></div>
            </div>
            <div class="datatask-progress-text">{{ task.progress.percent|default:0 }}% — {{ task.progress.message|default:"" }}</div>
            {% endif %}
        </div>
        {% endfor %}
        {% if recent_tasks %}
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">{% trans "Recent" %}</h6>
        {% for task in recent_tasks %}
        <div class="dropdown-item datatask-item">
            <span class="datatask-name">{{ task.name }}</span>
            <span class="datatask-state datatask-state-{{ task.state|lower }}">{{ task.state }}</span>
        </div>
        {% endfor %}
        {% endif %}
        <div class="dropdown-divider"></div>
        <a href="{% url 'app_data:task_list' %}" class="dropdown-item datatask-all-link">
            <i class="fa fa-list fa-fw"></i> {% trans "All tasks" %}
        </a>
    </div>
</li>
{% else %}
<li id="datatask-navbar-container" class="nav-item dropdown datatask-nav-item">
    <a href="#" data-bs-toggle="dropdown" class="nav-icon pe-md-0 dropdown-toggle datatask-nav-toggle">
        <span class="datatask-label-idle">{% trans "Idle" %}</span>
    </a>
    <div class="dropdown-menu dropdown-menu-end datatask-dropdown">
        {% if recent_tasks %}
        <h6 class="dropdown-header">{% trans "Recent" %}</h6>
        {% for task in recent_tasks %}
        <div class="dropdown-item datatask-item">
            <span class="datatask-name">{{ task.name }}</span>
            <span class="datatask-state datatask-state-{{ task.state|lower }}">{{ task.state }}</span>
        </div>
        {% endfor %}
        <div class="dropdown-divider"></div>
        {% endif %}
        <a href="{% url 'app_data:task_list' %}" class="dropdown-item datatask-all-link">
            <i class="fa fa-list fa-fw"></i> {% trans "All tasks" %}
        </a>
    </div>
</li>
{% endif %}