{% load dlux_tags %}
{% load dlux_translation %}

<div class="dlux-user-report" data-dlux-user-report>
    <div class="d-flex flex-column flex-lg-row align-items-lg-start justify-content-between gap-3 mb-4">
        <div>
            <div class="text-uppercase small text-muted fw-bold mb-1">{{ DLUX_STRINGS.user_report_kicker }}</div>
            <h3 class="mb-1">
                <i class="bi bi-file-earmark-person me-2"></i>{{ DLUX_STRINGS.user_report_title }}
            </h3>
            <p class="text-muted mb-0">{{ DLUX_STRINGS.user_report_subtitle }}</p>
        </div>
        <div class="d-flex gap-2 no-print" data-dlux-modal-footer>
            <button type="button" class="btn btn-outline-primary rounded-pill" data-dlux-user-report-print>
                <i class="bi bi-printer me-1"></i>{{ DLUX_STRINGS.user_report_print }}
            </button>
            <a href="{{ xlsx_url }}?window={{ report.selected_window|default:'week' }}"
               class="btn btn-primary rounded-pill"
               data-dlux-user-report-export-base="{{ xlsx_url }}">
                <i class="bi bi-filetype-xlsx me-1"></i>{{ DLUX_STRINGS.user_report_export_xlsx }}
            </a>
        </div>
    </div>

    <div class="alert alert-info border-0 shadow-sm small mb-4">
        <i class="bi bi-info-circle me-1"></i>{{ DLUX_STRINGS.user_report_history_note }}
        {% if report.history_started_at %}
            <span class="fw-bold">{{ report.history_started_at|date:"Y-m-d H:i" }}</span>
        {% endif %}
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-6 col-xl-3">
            <div class="dlux-user-report-tile">
                <span>{{ DLUX_STRINGS.user_report_total_actions }}</span>
                <strong data-dlux-user-report-total-actions>{{ report.summary.activity_count }}</strong>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="dlux-user-report-tile">
                <span>{{ DLUX_STRINGS.user_report_estimated_time }}</span>
                <strong>{{ report.summary.estimated_duration }}</strong>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="dlux-user-report-tile">
                <span>{{ DLUX_STRINGS.user_report_known_devices }}</span>
                <strong>{{ report.summary.known_device_count }}</strong>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="dlux-user-report-tile">
                <span>{{ DLUX_STRINGS.user_report_ip_addresses }}</span>
                <strong>{{ report.summary.ip_count }}</strong>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <section class="dlux-user-report-card">
                <h5><i class="bi bi-person-vcard me-2"></i>{{ DLUX_STRINGS.user_report_identity }}</h5>
                <dl class="dlux-user-report-list">
                    <dt>{{ DLUX_STRINGS.form_username }}</dt>
                    <dd>{{ report.summary.username }}</dd>
                    <dt>{{ DLUX_STRINGS.tbl_full_name }}</dt>
                    <dd>{{ report.summary.display_name }}</dd>
                    <dt>{{ DLUX_STRINGS.form_email }}</dt>
                    <dd>{{ report.summary.email|default:DLUX_STRINGS.user_report_not_available }}</dd>
                    <dt>{{ DLUX_STRINGS.role_type }}</dt>
                    <dd>{{ report.tier.title }}</dd>
                    <dt>{{ DLUX_STRINGS.tbl_is_active }}</dt>
                    <dd>{% if report.summary.is_active %}{{ DLUX_STRINGS.account_active }}{% else %}{{ DLUX_STRINGS.account_inactive }}{% endif %}</dd>
                    <dt>{{ DLUX_STRINGS.date_joined }}</dt>
                    <dd>{{ report.summary.date_joined|date:"Y-m-d H:i" }}</dd>
                    <dt>{{ DLUX_STRINGS.tbl_last_login }}</dt>
                    <dd>{{ report.summary.last_login|date:"Y-m-d H:i"|default:DLUX_STRINGS.user_report_not_available }}</dd>
                </dl>
            </section>
        </div>

        <div class="col-lg-6">
            <section class="dlux-user-report-card">
                <h5><i class="bi bi-activity me-2"></i>{{ DLUX_STRINGS.user_report_presence }}</h5>
                <dl class="dlux-user-report-list">
                    <dt>{{ DLUX_STRINGS.user_report_first_seen }}</dt>
                    <dd>{{ report.summary.first_seen_at|date:"Y-m-d H:i"|default:DLUX_STRINGS.user_report_not_available }}</dd>
                    <dt>{{ DLUX_STRINGS.user_report_last_seen }}</dt>
                    <dd>{{ report.summary.last_seen_at|date:"Y-m-d H:i"|default:DLUX_STRINGS.user_report_not_available }}</dd>
                    <dt>{{ DLUX_STRINGS.user_report_days_observed }}</dt>
                    <dd>{{ report.summary.days_observed }}</dd>
                    <dt>{{ DLUX_STRINGS.user_report_requests }}</dt>
                    <dd>{{ report.summary.request_count }}</dd>
                    <dt>{{ DLUX_STRINGS.user_report_browsers }}</dt>
                    <dd>{% if report.browsers %}{{ report.browsers|join:", " }}{% else %}{{ DLUX_STRINGS.user_report_not_available }}{% endif %}</dd>
                    <dt>{{ DLUX_STRINGS.user_report_operating_systems }}</dt>
                    <dd>{% if report.operating_systems %}{{ report.operating_systems|join:", " }}{% else %}{{ DLUX_STRINGS.user_report_not_available }}{% endif %}</dd>
                </dl>
            </section>
        </div>

        <div class="col-12">
            <section class="dlux-user-report-card">
                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mb-3">
                    <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>{{ DLUX_STRINGS.user_report_activity_breakdown }}</h5>
                    <ul class="nav nav-tabs dlux-user-report-tabs border-0" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link{% if report.selected_window == 'week' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#dlux-report-window-week" type="button" role="tab" aria-selected="{% if report.selected_window == 'week' %}true{% else %}false{% endif %}" data-dlux-user-report-window="week" data-dlux-user-report-activity-count="{{ report.windows.week.activity_count }}">
                                {{ DLUX_STRINGS.user_report_window_week }}
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link{% if report.selected_window == 'month' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#dlux-report-window-month" type="button" role="tab" aria-selected="{% if report.selected_window == 'month' %}true{% else %}false{% endif %}" data-dlux-user-report-window="month" data-dlux-user-report-activity-count="{{ report.windows.month.activity_count }}">
                                {{ DLUX_STRINGS.user_report_window_month }}
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link{% if report.selected_window == 'all' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#dlux-report-window-all" type="button" role="tab" aria-selected="{% if report.selected_window == 'all' %}true{% else %}false{% endif %}" data-dlux-user-report-window="all" data-dlux-user-report-activity-count="{{ report.windows.all.activity_count }}">
                                {{ DLUX_STRINGS.user_report_window_all }}
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade{% if report.selected_window == 'week' %} show active{% endif %}" id="dlux-report-window-week" role="tabpanel">
                        {% include "dlux/users/_user_report_window.html" with window=report.windows.week %}
                    </div>
                    <div class="tab-pane fade{% if report.selected_window == 'month' %} show active{% endif %}" id="dlux-report-window-month" role="tabpanel">
                        {% include "dlux/users/_user_report_window.html" with window=report.windows.month %}
                    </div>
                    <div class="tab-pane fade{% if report.selected_window == 'all' %} show active{% endif %}" id="dlux-report-window-all" role="tabpanel">
                        {% include "dlux/users/_user_report_window.html" with window=report.windows.all %}
                    </div>
                </div>
            </section>
        </div>

        <div class="col-12">
            <section class="dlux-user-report-card">
                <h5><i class="bi bi-hdd-network me-2"></i>{{ DLUX_STRINGS.user_report_devices_networks }}</h5>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead>
                            <tr>
                                <th>{{ DLUX_STRINGS.user_report_device }}</th>
                                <th>{{ DLUX_STRINGS.user_report_first_seen }}</th>
                                <th>{{ DLUX_STRINGS.user_report_last_seen }}</th>
                                <th>{{ DLUX_STRINGS.user_report_ip_addresses }}</th>
                                <th>{{ DLUX_STRINGS.trusted_device_badge }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for device in report.known_devices %}
                                <tr>
                                    <td>{{ device.device_label|default:DLUX_STRINGS.user_report_not_available }}</td>
                                    <td>{{ device.first_seen_at|date:"Y-m-d H:i" }}</td>
                                    <td>{{ device.last_seen_at|date:"Y-m-d H:i" }}</td>
                                    <td class="small">{% if device.ip_addresses %}{{ device.ip_addresses|join:", " }}{% else %}{{ DLUX_STRINGS.user_report_not_available }}{% endif %}</td>
                                    <td>
                                        {% if device.trusted_device and device.trusted_device.is_active %}
                                            <span class="badge bg-success-subtle text-success border">{{ DLUX_STRINGS.current }}</span>
                                        {% else %}
                                            <span class="badge bg-light text-muted border">{{ DLUX_STRINGS.user_report_no }}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="5" class="text-muted text-center py-4">{{ DLUX_STRINGS.user_report_empty_devices }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>

        <div class="col-12">
            <section class="dlux-user-report-card">
                <h5><i class="bi bi-clock-history me-2"></i>{{ DLUX_STRINGS.stats_recent_activity }}</h5>
                <div data-dlux-user-report-recent-window="week"{% if report.selected_window != 'week' %} class="d-none"{% endif %}>
                    {% include "dlux/users/_user_report_activity.html" with logs=report.recent_activity_windows.week %}
                </div>
                <div data-dlux-user-report-recent-window="month"{% if report.selected_window != 'month' %} class="d-none"{% endif %}>
                    {% include "dlux/users/_user_report_activity.html" with logs=report.recent_activity_windows.month %}
                </div>
                <div data-dlux-user-report-recent-window="all"{% if report.selected_window != 'all' %} class="d-none"{% endif %}>
                    {% include "dlux/users/_user_report_activity.html" with logs=report.recent_activity_windows.all %}
                </div>
            </section>
        </div>
    </div>
</div>