{% load microsys_tags %}
{% load microsys_translation %}

<div class="ms-user-report" data-ms-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">{{ MS_TRANS.user_report_kicker }}</div>
            <h3 class="mb-1">
                <i class="bi bi-file-earmark-person me-2"></i>{{ MS_TRANS.user_report_title }}
            </h3>
            <p class="text-muted mb-0">{{ MS_TRANS.user_report_subtitle }}</p>
        </div>
        <div class="d-flex gap-2 no-print">
            <button type="button" class="btn btn-outline-primary rounded-pill" data-ms-user-report-print>
                <i class="bi bi-printer me-1"></i>{{ MS_TRANS.user_report_print }}
            </button>
            <a href="{{ xlsx_url }}" class="btn btn-primary rounded-pill">
                <i class="bi bi-filetype-xlsx me-1"></i>{{ MS_TRANS.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>{{ MS_TRANS.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="ms-user-report-tile">
                <span>{{ MS_TRANS.user_report_total_actions }}</span>
                <strong>{{ report.summary.activity_count }}</strong>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="ms-user-report-tile">
                <span>{{ MS_TRANS.user_report_estimated_time }}</span>
                <strong>{{ report.summary.estimated_duration }}</strong>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="ms-user-report-tile">
                <span>{{ MS_TRANS.user_report_known_devices }}</span>
                <strong>{{ report.summary.known_device_count }}</strong>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="ms-user-report-tile">
                <span>{{ MS_TRANS.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="ms-user-report-card">
                <h5><i class="bi bi-person-vcard me-2"></i>{{ MS_TRANS.user_report_identity }}</h5>
                <dl class="ms-user-report-list">
                    <dt>{{ MS_TRANS.form_username }}</dt>
                    <dd>{{ report.summary.username }}</dd>
                    <dt>{{ MS_TRANS.tbl_full_name }}</dt>
                    <dd>{{ report.summary.display_name }}</dd>
                    <dt>{{ MS_TRANS.form_email }}</dt>
                    <dd>{{ report.summary.email|default:MS_TRANS.user_report_not_available }}</dd>
                    <dt>{{ MS_TRANS.role_type }}</dt>
                    <dd>{{ report.tier.title }}</dd>
                    <dt>{{ MS_TRANS.tbl_is_active }}</dt>
                    <dd>{% if report.summary.is_active %}{{ MS_TRANS.account_active }}{% else %}{{ MS_TRANS.account_inactive }}{% endif %}</dd>
                    <dt>{{ MS_TRANS.date_joined }}</dt>
                    <dd>{{ report.summary.date_joined|date:"Y-m-d H:i" }}</dd>
                    <dt>{{ MS_TRANS.tbl_last_login }}</dt>
                    <dd>{{ report.summary.last_login|date:"Y-m-d H:i"|default:MS_TRANS.user_report_not_available }}</dd>
                </dl>
            </section>
        </div>

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

        <div class="col-lg-6">
            <section class="ms-user-report-card">
                <h5><i class="bi bi-bar-chart me-2"></i>{{ MS_TRANS.user_report_activity_breakdown }}</h5>
                <div class="ms-user-report-stack">
                    {% for item in report.action_counts %}
                        <div class="ms-user-report-meter">
                            <span>{{ item.label }}</span>
                            <strong>{{ item.count }}</strong>
                        </div>
                    {% empty %}
                        <p class="text-muted mb-0">{{ MS_TRANS.user_report_empty_activity }}</p>
                    {% endfor %}
                </div>
            </section>
        </div>

        <div class="col-lg-6">
            <section class="ms-user-report-card">
                <h5><i class="bi bi-diagram-3 me-2"></i>{{ MS_TRANS.user_report_model_breakdown }}</h5>
                <div class="ms-user-report-stack">
                    {% for item in report.model_counts %}
                        <div class="ms-user-report-meter">
                            <span>{{ item.label }}</span>
                            <strong>{{ item.count }}</strong>
                        </div>
                    {% empty %}
                        <p class="text-muted mb-0">{{ MS_TRANS.user_report_empty_activity }}</p>
                    {% endfor %}
                </div>
            </section>
        </div>

        <div class="col-12">
            <section class="ms-user-report-card">
                <h5><i class="bi bi-hdd-network me-2"></i>{{ MS_TRANS.user_report_devices_networks }}</h5>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead>
                            <tr>
                                <th>{{ MS_TRANS.user_report_device }}</th>
                                <th>{{ MS_TRANS.user_report_first_seen }}</th>
                                <th>{{ MS_TRANS.user_report_last_seen }}</th>
                                <th>{{ MS_TRANS.user_report_ip_addresses }}</th>
                                <th>{{ MS_TRANS.trusted_device_badge }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for device in report.known_devices %}
                                <tr>
                                    <td>{{ device.device_label|default:MS_TRANS.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 %}{{ MS_TRANS.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">{{ MS_TRANS.current }}</span>
                                        {% else %}
                                            <span class="badge bg-light text-muted border">{{ MS_TRANS.user_report_no }}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="5" class="text-muted text-center py-4">{{ MS_TRANS.user_report_empty_devices }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>

        <div class="col-12">
            <section class="ms-user-report-card">
                <h5><i class="bi bi-clock-history me-2"></i>{{ MS_TRANS.stats_recent_activity }}</h5>
                <div class="ms-user-report-timeline" data-ms-user-report-activity data-ms-user-report-page-size="8">
                    {% for log in report.recent_activity %}
                        <div class="ms-user-report-log{% if forloop.counter0 >= 8 %} d-none{% endif %}" data-ms-user-report-activity-item>
                            <span class="badge ms-user-report-badge">{{ log.action|translate_log:'action' }}</span>
                            <strong>{{ log.model_name|translate_log:'model' }}</strong>
                            <small>{{ log.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                    {% empty %}
                        <p class="text-muted mb-0">{{ MS_TRANS.user_report_empty_activity }}</p>
                    {% endfor %}
                </div>
                {% if report.recent_activity|length > 8 %}
                    <div class="ms-user-report-pagination" data-ms-user-report-activity-pagination>
                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill" data-ms-user-report-page-prev>
                            <i class="bi bi-chevron-left me-1"></i>{{ MS_TRANS.btn_prev }}
                        </button>
                        <span class="small" data-ms-user-report-page-state
                              data-page-label="{{ MS_TRANS.table_page_label }}"
                              data-of-label="{{ MS_TRANS.table_of_label }}"></span>
                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill" data-ms-user-report-page-next>
                            {{ MS_TRANS.btn_next }}<i class="bi bi-chevron-right ms-1"></i>
                        </button>
                    </div>
                {% endif %}
            </section>
        </div>
    </div>
</div>