{% extends "backend/custom/surround.html" %}

{% block title %}Exportar{% endblock %}

{% block content %}

<div class="container mt-3">
    <div class="row d-flex align-items-center">
        <div class="col-sm-12 mx-auto my-auto">
            <form method="post" id="exportForm">
                <input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" id="classid" name="classid" value="{{classid}}">
                <input type="hidden" id="rowList" name="rowList" value="{{rowList}}">
                <input type="hidden" id="rowList" name="action" value="{{action}}">

                <div class="card shadow-sm">
                    <div class="card-header bg-secondary text-white">
                        <span class="material-icons align-middle me-2">file_download</span>
                        Opciones
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <p class="card-text text-muted mb-4">
                                ¿Qué datos deseas incluir en esta acción?
                            </p>
                            
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="export_scope" id="scopeSelected" value="selected_items" {% if list_size == 0 %} disabled {% else %}checked{% endif %} >
                                    <label class="form-check-label" for="scopeSelected">
                                        <strong class="text-primary">Solo los ítems seleccionados {{list_size}}</strong>
                                        <span class="text-muted d-block small">(Exportar solo las filas marcadas.)</span>
                                    </label>
                                </div>
                            </div>

                            <div class="mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="export_scope" id="scopeAll" value="all_data" >
                                    <label class="form-check-label" for="scopeAll">
                                        <strong>Toda la tabla ({{table_size}})</strong>
                                        <span class="text-muted d-block small">(Exportar todos los registros visibles.)</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-outline-secondary" onclick="window.history.back()">
                            Cancelar
                        </button>

                        <button type="submit" class="btn btn-success">
                            <span class="material-icons align-middle me-1" style="font-size: 1.2em;">arrow_forward</span>
                            Continuar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}