{% extends "base.html" %}

{% block title %}Informe ENS Profesional - ENS PYME{% endblock %}

{% block content %}
  <div class="gradient-header">
    <h1>📊 Informe ENS Profesional</h1>
    <p class="lead">Análisis Integral de Ciberseguridad</p>
  </div>
  
  <div class="alert alert-info">
    <strong>🎯 Informe Completo Generado</strong><br>
    El informe profesional incluye análisis avanzados de todos los scripts, gráficos interactivos y recomendaciones personalizadas.
  </div>
  
  <div class="nav-links">
    <a href="{{ url_for('generar_informe') }}" class="btn btn-success btn-lg">
      📥 Descargar PDF Profesional
    </a>
    <a href="{{ url_for('index') }}" class="btn btn-secondary">
      🏠 Volver al menú
    </a>
  </div>

  <div class="informe-preview">
    <div class="row">
      <div class="col-md-8">
        <h2>📋 Contenido del Informe</h2>
        
        <div class="content-sections">
          <div class="section-item">
            <div class="section-icon">🎯</div>
            <div class="section-content">
              <h4>1. Resumen Ejecutivo</h4>
              <p>Métricas clave, estado general de cumplimiento y análisis de riesgo</p>
            </div>
          </div>
          
          <div class="section-item">
            <div class="section-icon">📊</div>
            <div class="section-content">
              <h4>2. Dashboard de Cumplimiento ENS</h4>
              <p>Análisis detallado por familias de controles con gráficos avanzados</p>
            </div>
          </div>
          
          <div class="section-item">
            <div class="section-icon">🚨</div>
            <div class="section-content">
              <h4>3. Vulnerabilidades e Incidentes</h4>
              <p>Análisis de vulnerabilidades detectadas y gestión de incidentes</p>
            </div>
          </div>
          
          <div class="section-item">
            <div class="section-icon">⚔️</div>
            <div class="section-content">
              <h4>4. Simulación de Ataques</h4>
              <p>Resultados de pruebas de penetración y evaluación de exposición</p>
            </div>
          </div>
          
          <div class="section-item">
            <div class="section-icon">💰</div>
            <div class="section-content">
              <h4>5. Optimización de Recursos</h4>
              <p>Análisis de costes, ROI estimado y plan de prioridades</p>
            </div>
          </div>
          
          <div class="section-item">
            <div class="section-icon">📋</div>
            <div class="section-content">
              <h4>6. Plan de Acción</h4>
              <p>Recomendaciones específicas y próximos pasos a seguir</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="info-card">
          <h3>📈 Características del Informe</h3>
          
          <div class="feature-list">
            <div class="feature-item">
              <span class="feature-icon">✅</span>
              <span>Análisis integral de 8 herramientas especializadas</span>
            </div>
            
            <div class="feature-item">
              <span class="feature-icon">📊</span>
              <span>Gráficos profesionales y dashboards interactivos</span>
            </div>
            
            <div class="feature-item">
              <span class="feature-icon">🎯</span>
              <span>Métricas clave y KPIs de ciberseguridad</span>
            </div>
            
            <div class="feature-item">
              <span class="feature-icon">💡</span>
              <span>Recomendaciones específicas y priorizadas</span>
            </div>
            
            <div class="feature-item">
              <span class="feature-icon">📋</span>
              <span>Plan de acción detallado por fases</span>
            </div>
            
            <div class="feature-item">
              <span class="feature-icon">🔒</span>
              <span>Cumplimiento ENS Nivel Alto verificado</span>
            </div>
          </div>
        </div>
        
        <div class="stats-preview">
          <h4>📊 Vista Previa de Datos</h4>
          <div class="stat-item">
            <span class="stat-value">{{ total_controles or 'N/A' }}</span>
            <span class="stat-label">Controles Evaluados</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ porcentaje_cumplimiento or 'N/A' }}%</span>
            <span class="stat-label">Cumplimiento Global</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ total_vulnerabilidades or 'N/A' }}</span>
            <span class="stat-label">Vulnerabilidades</span>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block extra_css %}
<style>
  .gradient-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3em 2em;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 2em;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
  
  .gradient-header h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
  }
  
  .gradient-header .lead {
    font-size: 1.2em;
    margin-bottom: 0;
    opacity: 0.9;
  }
  
  .informe-preview {
    background: white;
    border-radius: 15px;
    padding: 2em;
    margin-top: 2em;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e3f2fd;
  }
  
  .content-sections {
    margin-top: 1.5em;
  }
  
  .section-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5em;
    padding: 1em;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #0066cc;
    transition: all 0.3s ease;
  }
  
  .section-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  
  .section-icon {
    font-size: 2em;
    margin-right: 1em;
    width: 60px;
    text-align: center;
  }
  
  .section-content h4 {
    margin-bottom: 0.5em;
    color: #2c3e50;
    font-weight: 600;
  }
  
  .section-content p {
    margin-bottom: 0;
    color: #6c757d;
    line-height: 1.5;
  }
  
  .info-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 1.5em;
    border-radius: 15px;
    margin-bottom: 1.5em;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
  
  .info-card h3 {
    margin-bottom: 1em;
    font-weight: 600;
  }
  
  .feature-list {
    space-y: 0.75em;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75em;
    font-size: 0.95em;
  }
  
  .feature-icon {
    margin-right: 0.75em;
    font-size: 1.1em;
  }
  
  .stats-preview {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 1.5em;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
  
  .stats-preview h4 {
    margin-bottom: 1em;
    font-weight: 600;
  }
  
  .stat-item {
    margin-bottom: 1em;
  }
  
  .stat-value {
    display: block;
    font-size: 2em;
    font-weight: 700;
    line-height: 1;
  }
  
  .stat-label {
    display: block;
    font-size: 0.9em;
    opacity: 0.9;
    margin-top: 0.25em;
  }
  
  .nav-links {
    text-align: center;
    margin: 2em 0;
  }
  
  .nav-links .btn {
    margin: 0 0.5em;
    padding: 0.75em 2em;
    font-weight: 600;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  }
  
  .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
  }
  
  .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border: none;
    color: white;
  }
  
  .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
  }
  
  @media (max-width: 768px) {
    .gradient-header h1 {
      font-size: 2em;
    }
    
    .section-item {
      flex-direction: column;
      text-align: center;
    }
    
    .section-icon {
      margin-bottom: 0.5em;
      margin-right: 0;
    }
    
    .nav-links .btn {
      display: block;
      margin: 0.5em 0;
      width: 100%;
    }
  }
</style>
{% endblock %}