{% extends 'base.html' %}

{% block content %}
<section class="page-view active">
  <div class="view-header">
    <div class="view-title">
      <h2><i data-lucide="cpu" style="color:var(--efintel-blue);"></i> {{ title|default:"Motor de Cálculo Mensual de Remuneraciones" }}</h2>
      <p>Procesamiento de sueldos imponibles, leyes sociales (AFP, Salud, AFC) y retenciones de impuestos.</p>
    </div>
    <div>
      <a href="{% url 'payroll:slip_list' %}" class="btn-primary" style="background:var(--efintel-gray); text-decoration:none;">
        <i data-lucide="arrow-left" style="width:16px;"></i> Volver
      </a>
    </div>
  </div>

  <div class="data-card" style="max-width:750px; margin:0 auto; padding:2rem;">
    <form method="post" class="modern-form">
      {% csrf_token %}
      {% include "partials/_form_grid.html" %}
      <div style="margin-top:1.5rem; display:flex; gap:1rem; justify-content:flex-end;">
        <a href="{% url 'payroll:slip_list' %}" class="btn-secondary" style="text-decoration:none;">Cancelar</a>
        <button type="submit" class="btn-primary"><i data-lucide="zap" style="width:16px;"></i> Ejecutar Motor de Cálculo</button>
      </div>
    </form>
  </div>
</section>
{% endblock %}