{% extends "dlux/form_base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block form_content %}
<div class="container-fluid py-2 dlux-preview-components">
    <div class="row g-3 mb-3">
        {% for row in sample_rows %}
        <div class="col-12 col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="badge rounded-pill text-bg-primary">{{ row.status }}</span>
                        <span class="small text-body-secondary">{{ row.date }}</span>
                    </div>
                    <h6 class="card-title mb-1">{{ row.name }}</h6>
                    <div class="fs-4 fw-semibold">{{ row.amount }}</div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="card shadow-sm mb-3">
        <div class="card-body">
            <h5 class="card-title">{{ DLUX_STRINGS.preview_sample_components_title|default:"Buttons, badges and alerts" }}</h5>
            <div class="d-flex flex-wrap gap-2 mb-3">
                <button type="button" class="btn btn-primary rounded-pill">{{ DLUX_STRINGS.btn_save|default:"Save" }}</button>
                <button type="button" class="btn btn-outline-primary rounded-pill">{{ DLUX_STRINGS.preview_sample_action_export|default:"Export" }}</button>
                <button type="button" class="btn btn-outline-secondary rounded-pill">{{ DLUX_STRINGS.btn_cancel|default:"Cancel" }}</button>
                <button type="button" class="btn btn-danger rounded-pill">{{ DLUX_STRINGS.delete_label|default:"Delete" }}</button>
                <span class="badge text-bg-success align-self-center">{{ DLUX_STRINGS.preview_sample_status_active|default:"Active" }}</span>
                <span class="badge text-bg-warning align-self-center">{{ DLUX_STRINGS.preview_sample_status_pending|default:"Pending" }}</span>
                <span class="badge text-bg-secondary align-self-center">{{ DLUX_STRINGS.preview_sample_status_closed|default:"Closed" }}</span>
            </div>
            <div class="alert alert-info mb-2" role="status">{{ DLUX_STRINGS.preview_sample_alert_info|default:"Changes you save here apply to every user." }}</div>
            <div class="alert alert-warning mb-0" role="status">{{ DLUX_STRINGS.preview_sample_alert_warning|default:"Two records need review before the end of the month." }}</div>
        </div>
    </div>
    <div class="card shadow-sm dlux-table-card">
        <div class="card-body p-0">
            <table class="table table-hover align-middle dlux-data-table mb-0">
                <thead><tr>
                    <th>{{ DLUX_STRINGS.preview_sample_col_number|default:"Number" }}</th>
                    <th>{{ DLUX_STRINGS.preview_sample_col_name|default:"Subject" }}</th>
                    <th>{{ DLUX_STRINGS.preview_sample_col_status|default:"Status" }}</th>
                    <th class="text-end">{{ DLUX_STRINGS.preview_sample_col_amount|default:"Amount" }}</th>
                </tr></thead>
                <tbody>
                {% for row in sample_rows %}
                    <tr><td>{{ row.number }}</td><td>{{ row.name }}</td><td>{{ row.status }}</td><td class="text-end">{{ row.amount }}</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}