<div hx-get="/status" hx-trigger="every 5s" hx-swap="outerHTML">

    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-sm-6 col-xxl-4 mb-3 mb-sm-0">
                <div class="card">
                    <div class="card-header text-bg-primary">
                        Status{% if current_user %} - {{ current_user }}{% endif %}
                    </div>
                    {% if error %}
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="fw-bold">{{ error }}</div>
                        </li>
                    </ul>
                    {% endif %}
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="fw-bold">No input is needed</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6 col-xxl-4">
                <div class="card">
                    <div class="card-header text-bg-primary">
                        Photos Download{% if current_user %} - {{ current_user }}{% endif %}
                    </div>
                    <ul class="list-group list-group-flush">
                        {% if progress._photos_count != 0 %}
                            <li class="list-group-item">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="progress flex-grow-1 me-2" role="progressbar" aria-label="Basic example" aria-valuenow="{{ progress.photos_percent }}" aria-valuemin="0" aria-valuemax="100">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: {{ progress.photos_percent }}%">{{ progress.photos_percent }} %</div>
                                    </div>
                                    <div>{{ progress._photos_counter }} / {{ progress._photos_count }}</div>
                                </div>
                                <button hx-post="/cancel" class="btn btn-primary mb-2">Cancel</button>
                            </li>
                        {% endif %}
                        {% if progress.photos_last_message != None and progress._photos_count == 0 %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div class="fw-bold">Last Message</div>
                                <span>{{ progress.photos_last_message }}</span>
                            </li>
                        {% endif %}
                        {% if progress._waiting != 0 %}
                            <li class="list-group-item">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div class="fw-bold">Waiting for next iteration</div>
                                    <span>{{ progress.waiting_readable }}</span>
                                </div>
                                <button hx-post="/resume" class="btn btn-primary mb-2">Resume</button>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            {% if global_config %}
            <div class="col-sm-12 col-xxl-6 mb-3">
                <div class="card">
                    <div class="card-header text-bg-success">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Global Configuration</span>
                            <button class="btn btn-link btn-sm text-white p-0" type="button" data-bs-toggle="collapse" data-bs-target="#globalConfig" aria-expanded="true" aria-controls="globalConfig">
                                <i class="bi bi-chevron-down"></i>
                            </button>
                        </div>
                    </div>
                    <div class="collapse show" id="globalConfig">
                        <ul class="list-group list-group-flush">
                            {% for record in global_config %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <div class="fw-bold">{{ record }}</div>
                                    <span>
                                        {% set value = global_config[record] %}
                                        {% if value is sequence and value is not string %}
                                            {{ value|map('string')|join(" ") }}
                                        {% else %}
                                            {{ value }}
                                        {% endif %}
                                    </span>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if user_configs %}
            <div class="col-sm-12 col-xxl-6 mb-3">
                <div class="card">
                    <div class="card-header text-bg-info">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>User Configurations ({{ user_configs|length }})</span>
                            <button class="btn btn-link btn-sm text-white p-0" type="button" data-bs-toggle="collapse" data-bs-target="#userConfigs" aria-expanded="true" aria-controls="userConfigs">
                                <i class="bi bi-chevron-down"></i>
                            </button>
                        </div>
                    </div>
                    <div class="collapse show" id="userConfigs">
                        {% for user_config in user_configs %}
                        <div class="card-body p-0">
                            <div class="accordion" id="accordion{{ loop.index }}">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button{% if not loop.first %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#user{{ loop.index }}" aria-expanded="{% if loop.first %}true{% else %}false{% endif %}" aria-controls="user{{ loop.index }}">
                                            <span class="fw-bold me-2">{{ user_config.username }}</span>
                                            {% if user_config.username == current_user %}
                                                <span class="badge bg-success">Active</span>
                                            {% endif %}
                                        </button>
                                    </h2>
                                    <div id="user{{ loop.index }}" class="accordion-collapse collapse{% if loop.first %} show{% endif %}" data-bs-parent="#accordion{{ loop.index }}">
                                        <div class="accordion-body p-0">
                                            <ul class="list-group list-group-flush">
                                                {% for record in user_config %}
                                                    {% if record != 'password' %}
                                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                                        <div class="fw-bold">{{ record }}</div>
                                                        <span>
                                                            {% set value = user_config[record] %}
                                                            {% if value is sequence and value is not string %}
                                                                {{ value|map('string')|join(" ") }}
                                                            {% else %}
                                                                {{ value }}
                                                            {% endif %}
                                                        </span>
                                                    </li>
                                                    {% endif %}
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

        </div>
    </div>
</div> 
