{% extends 'base.html' %}
{% load static %}

{% block head %}
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
{% endblock %}

{% block title %}Crear Acta Electoral{% endblock %}
{% block active %}sidebar_elecciones_proceso_acta_diputados_crear{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="nav-icon fas fa-file-signature mr-1"></i> Crear Acta Electoral</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{% url 'dashboard_votaciones' %}">Inicio</a></li>
                    <li class="breadcrumb-item active"><i class="nav-icon fas fa-file-signature mr-1"></i> Crear Acta Electoral</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">

    <!-- block content -->
    <!-- Default box -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><b>Votaciones Internas Honduras 2025</b> - Formulario de registro de acta electoral</h3>
        </div>
        <div class="card-body">

            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="pk_acta" value="">
                <input type="hidden" name="foto_url" value="">

                <!-- ACTA DE CIERRE PRESIDENCIAL -->
                <div class="bg-gray-100 p-4">
                    <div class="max-w-4xl mx-auto bg-white p-6 shadow-md">
                        <div class="flex justify-between items-center mb-4">
                            <img src="https://placehold.co/100x50" alt="CNE Logo" class="h-12">
                            <div class="text-center">
                                <h1 class="text-xl font-bold">ACTA DE CIERRE DIPUTADOS</h1>
                                <div class="flex justify-center space-x-4">
                                    <div>
                                        <p class="text-sm">INICIO DEL ESCRUTINIO</p>
                                        <p class="text-lg font-bold">7:10</p>
                                    </div>
                                    <div>
                                        <p class="text-sm">FINALIZACION DEL ESCRUTINIO</p>
                                        <p class="text-lg font-bold">10:10</p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm">DEPARTAMENTO</p>
                                <p class="text-sm">MUNICIPIO</p>
                                <p class="text-sm">AREA</p>
                                <p class="text-sm">SECTOR ELECTORAL</p>
                                <p class="text-sm">CENTRO DE VOTACIÓN</p>
                                <p class="text-sm">JRV N° 123-4</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-5 gap-2 mb-4">
                            <div class="col-span-1">
                                <p class="text-center font-bold">
                                    LOGO DEL MOVIMIENTO 1
                                </p>
                                <div class="bg-yellow-300 p-2">
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            001
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            002
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            003
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            004
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            005
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            006
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            007
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            008
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            009
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            010
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            011
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            012
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            013
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            014
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            015
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            016
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            017
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            018
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            019
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            020
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            021
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            022
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">
                                    LOGO DEL MOVIMIENTO 2
                                </p>
                                <div class="bg-yellow-300 p-2">
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            001
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            002
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            003
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            004
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            005
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            006
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            007
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            008
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            009
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            010
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            011
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            012
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            013
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            014
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            015
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            016
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            017
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            018
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            019
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            020
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            021
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            022
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">
                                    LOGO DEL MOVIMIENTO 3
                                </p>
                                <div class="bg-yellow-300 p-2">
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            001
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            002
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            003
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            004
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            005
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            006
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            007
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            008
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            009
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            010
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            011
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            012
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            013
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            014
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            015
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            016
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            017
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            018
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            019
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            020
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            021
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            022
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">
                                    LOGO DEL MOVIMIENTO 4
                                </p>
                                <div class="bg-yellow-300 p-2">
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            001
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            002
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            003
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            004
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            005
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            006
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            007
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            008
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            009
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            010
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            011
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            012
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            013
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            014
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            015
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            016
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            017
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            018
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            019
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            020
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            021
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            022
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">
                                    LOGO DEL MOVIMIENTO 5
                                </p>
                                <div class="bg-yellow-300 p-2">
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            001
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            002
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            003
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            004
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            005
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            006
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            007
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            008
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            009
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            010
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            011
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            012
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            013
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            014
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            015
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            016
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            017
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            018
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            019
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            020
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            021
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2">
                                        <p class="text-center">
                                            022
                                        </p>
                                        <p class="text-center">
                                            0
                                        </p>
                                        <p class="text-center">
                                            1
                                        </p>
                                        <p class="text-center">
                                            5
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-2 mb-4">
                            <div class="col-span-1">
                                <p class="text-center font-bold">CARGOS</p>
                                <div class="bg-gray-200 p-2">
                                    <p class="text-center">PRESIDENTE PROPIETARIO</p>
                                    <p class="text-center">PRESIDENTE SUPLENTE</p>
                                    <p class="text-center">SECRETARIO PROPIETARIO</p>
                                    <p class="text-center">SECRETARIO SUPLENTE</p>
                                    <p class="text-center">ESCRUTADOR PROPIETARIO</p>
                                    <p class="text-center">ESCRUTADOR SUPLENTE</p>
                                    <p class="text-center">VOCAL I PROPIETARIO</p>
                                    <p class="text-center">VOCAL I SUPLENTE</p>
                                    <p class="text-center">VOCAL II PROPIETARIO</p>
                                    <p class="text-center">VOCAL II SUPLENTE</p>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">NOMBRES Y APELLIDOS</p>
                                <div class="bg-gray-100 p-2">
                                    <p class="text-center">Kevir Perera</p>
                                    <p class="text-center">Emilia Martel</p>
                                    <p class="text-center">Mayra Montenegro</p>
                                    <p class="text-center">Yolanda Clemente</p>
                                    <p class="text-center">Denis Rosales</p>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">NÚMERO DE DOCUMENTO NACIONAL DE IDENTIFICACIÓN</p>
                                <div class="bg-gray-100 p-2">
                                    <p class="text-center">0000000000000</p>
                                    <p class="text-center">0000000000000</p>
                                    <p class="text-center">0000000000000</p>
                                    <p class="text-center">0000000000000</p>
                                    <p class="text-center">0000000000000</p>
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-2 mb-4">
                            <div class="col-span-1">
                                <p class="text-center font-bold">TOTAL DE VOTANTES</p>
                                <div class="bg-gray-100 p-2">
                                    <p class="text-center">3,217</p>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">PAPELETAS VÁLIDAS</p>
                                <div class="bg-gray-100 p-2">
                                    <p class="text-center">3,010</p>
                                </div>
                            </div>
                            <div class="col-span-1">
                                <p class="text-center font-bold">PAPELETAS EN BLANCO</p>
                                <div class="bg-gray-100 p-2">
                                    <p class="text-center">115</p>
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-2 mb-4">
                            <div class="col-span-1">
                                <p class="text-center font-bold">PAPELETAS NULAS</p>
                                <div class="bg-gray-100 p-2">
                                    <p class="text-center">112</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center">
                            <img src="https://placehold.co/100x50" alt="QR Code" class="h-12">
                            <img src="https://placehold.co/100x50" alt="Signature" class="h-12">
                        </div>
                    </div>
                </div>

                <br>
                <div class="form-group border rounded border-secondary p-2">
                    <label for="foto">Foto</label>
                    <div class="mb-2">
                        <img id="foto_img" src="{% static 'img/no-image.jpg' %}" alt="Previsualización" class="img-fluid border rounded" style="max-height: 400px;">
                    </div>
                    <div class="input-group">
                        <input type="file" data-subir="1" class="form-control" id="foto" name="foto" accept="image/*">
                        <div class="input-group-append">
                            <span id="foto_tomar" class="input-group-text bg-primary" style="cursor: pointer;" title="Tomar fotografía"><i class="fas fa-camera"></i></span>
                        </div>
                        <div class="input-group-append">
                            <span id="foto_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Guardar</button>

            </form>

        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <b>Votaciones Internas Honduras 2025</b> - Actas Electorales
        </div>
        <!-- /.card-footer-->
    </div>
    <!-- /.card -->

</section>
<!-- /.content -->
{% endblock %}

{% block scripts %}
<script>
    if (new URLSearchParams(window.location.search).get('opc') == 4) $('section.content').find('button[type="submit"]').hide();

    let pk_acta = new URLSearchParams(window.location.search).get('pk_acta');

    if (pk_acta != null) {
        $('[name="pk_acta"]').val(pk_acta);
        AJAX_REQUEST('{% url "list_elecciones_proceso_acta" %}', 'GET', { id: pk_acta }, function (response) {
            if (response.result.length != 0) {
                response = response.result[0];
                SELECT2_ELECCIONES_PROCESO('pk_proceso', response.pk_proceso);
                SELECT2_CANDIDATOS('pk_candidato', response.pk_candidato);
                $('[name="votos"]').val(response.votos);
            } else {
                // No deberia poder usar esta página (PK roto)
            }
        })
    } else {
        SELECT2_ELECCIONES_PROCESO('pk_proceso');
        SELECT2_CANDIDATOS('pk_candidato');
    }

    $('section.content form').validate({
        rules: {
            pk_acta: {
                required: true,
            },
            pk_proceso: {
                required: true,
            },
            pk_candidato: {
                required: true,
            },
            votos: {
                required: true,
            },
        },
        messages: {
            pk_acta: {
                required: REQUIRED_MESSAGE,
            },
            pk_proceso: {
                required: REQUIRED_MESSAGE,
            },
            pk_candidato: {
                required: REQUIRED_MESSAGE,
            },
            votos: {
                required: REQUIRED_MESSAGE,
            },
        },
        submitHandler: function (form) {
            AJAX_FORM(form, '{% url "save_elecciones_proceso_acta" %}', '{% url "listar_elecciones_proceso_acta" %}', pk_acta == null ? 1 : 2);
        }
    });
</script>
{% endblock %}