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

{% block title %}Dashboard{% endblock %}
{% block active %}sidebar_dashboard{% 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-home mr-1"></i> Inicio</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <!-- <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Pace</li> -->
          <li class="breadcrumb-item active"><i class="nav-icon fas fa-home mr-1"></i> Inicio</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> - Tabla de listado de las actas del proceso
        electoral</h3>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="table_actas" class="table table-hover table-sm align-middle table-borderless rounded-3" style="width: 100%;">
          <thead class="text-white" style="background-color: #A3B0C7 !important;">
            <tr>
              <th>ID Acta</th>
              <th>ID Proceso</th>
              <th>ID Candidato</th>
              <th>Votos</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody class="small"></tbody>
        </table>
      </div>
    </div>
    <!-- /.card-body -->
    <div class="card-footer">
      <b>Votaciones Internas Honduras 2025</b> - Actas del Proceso Electoral
    </div>
    <!-- /.card-footer-->
  </div>
  <!-- /.card -->

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

{% block scripts %}
<!-- Definir aquí todos los ID de dashboard.html -->
<script>
  class ID {
    static table_actas = '#table_actas';
  }
</script>

<script>
  $(document).ready(function () {
    class DATATABLES {
      static table_actas = $(ID.table_actas).DataTable({
        data: [
          { pk_acta: 1, pk_proceso: 1, pk_candidato: 1, votos: 109829 },
          { pk_acta: 2, pk_proceso: 1, pk_candidato: 2, votos: 95000 },
          { pk_acta: 3, pk_proceso: 2, pk_candidato: 3, votos: 120000 },
          { pk_acta: 4, pk_proceso: 2, pk_candidato: 4, votos: 85000 },
          { pk_acta: 5, pk_proceso: 3, pk_candidato: 5, votos: 140000 }
        ],
        autoWidth: false,
        scrollX: true,
        scrollY: '300px',
        scrollCollapse: true,
        pageLength: 50,
        dom: 'rftip',
        language: {
          url: "{% static 'json/es-ES.json' %}",
          paginate: {
            first: "«",
            last: "»",
            next: "›",
            previous: "‹"
          }
        },
        columns: [
          { data: 'pk_acta' },
          { data: 'pk_proceso' },
          { data: 'pk_candidato' },
          { data: 'votos' },
          {
            data: null,
            render: function (data, type) {
              if (type === 'display') {
                return `
                  <button class="btn btn-success"><i class="fas fa-plus"></i></button>
                  <button class="btn btn-primary"><i class="fas fa-external-link-alt"></i></button>
                  <button class="btn btn-danger"><i class="fas fa-file-pdf"></i></button>
                `;
              }
              return data;
            }
          }
        ]
      });
    }
  });

</script>
{% endblock %}