{% extends "base.html" %}

{% block title %}Generar Informe Final ENS - ENS PYME{% endblock %}

{% block content %}
  <h1>📊 8. Generar Informe Final ENS</h1>
  
  <p class="intro">
    Genera un informe profesional en PDF con todos los análisis realizados. 
    Antes de generar el informe, por favor especifica el nombre de tu empresa.
  </p>

  <div class="form-section">
    <h2>Datos de la Empresa</h2>
    
    <form method="post" action="{{ url_for('generar_informe') }}" class="empresa-form">
      <div class="form-group">
        <label for="empresa">Nombre de la Empresa:</label>
        <input type="text" 
               name="empresa" 
               id="empresa" 
               value="{{ empresa_default }}"
               placeholder="Ej: Mi Empresa S.L."
               required
               maxlength="100">
        <small class="help-text">
          Este nombre aparecerá en el encabezado y portada del informe PDF.
        </small>
      </div>
      
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">
          📊 Generar Informe PDF
        </button>
      </div>
    </form>
  </div>

  <div class="info-section">
    <h3>¿Qué incluye el informe?</h3>
    <ul>
      <li>📈 Dashboard de cumplimiento ENS con gráficos y métricas</li>
      <li>🔍 Análisis detallado de vulnerabilidades e incidentes</li>
      <li>⚔️ Resultados de simulación de ataques (si disponible)</li>
      <li>💰 Análisis de costes y optimización de recursos (si disponible)</li>
      <li>📋 Recomendaciones específicas por cada control ENS</li>
      <li>📊 Visualizaciones profesionales con gráficos avanzados</li>
    </ul>
  </div>

  <div class="nav-links">
    <a href="{{ url_for('index') }}" class="btn btn-secondary">🏠 Volver al menú principal</a>
  </div>
{% endblock %}

{% block extra_css %}
<style>
  .form-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2em;
    margin: 2em 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .form-section h2 {
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 2px solid #0066cc;
    padding-bottom: 0.5em;
  }
  
  .empresa-form {
    max-width: 600px;
  }
  
  .form-group {
    margin-bottom: 1.5em;
  }
  
  .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #495057;
  }
  
  .form-group input {
    width: 100%;
    padding: 0.75em;
    font-size: 1em;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.3s ease;
  }
  
  .form-group input:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
  }
  
  .help-text {
    display: block;
    margin-top: 0.5em;
    color: #6c757d;
    font-size: 0.9em;
  }
  
  .form-actions {
    text-align: center;
    margin-top: 2em;
  }
  
  .btn-primary {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: white;
    border: none;
    padding: 0.75em 2em;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .btn-primary:hover {
    background: linear-gradient(135deg, #0052a3, #003366);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  
  .info-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5em;
    margin: 2em 0;
  }
  
  .info-section h3 {
    margin-top: 0;
    color: #495057;
  }
  
  .info-section ul {
    margin: 1em 0;
    padding-left: 1.5em;
  }
  
  .info-section li {
    margin-bottom: 0.5em;
    color: #495057;
  }
  
  @media (max-width: 768px) {
    .form-section {
      padding: 1.5em;
    }
    
    .empresa-form {
      max-width: none;
    }
  }
</style>
{% endblock %}