{% extends "base.html" %}

{% block title %}Cuestionario ENS - ENS PYME{% endblock %}

{% block content %}
  <h1>📋 Responde el cuestionario</h1>
  
  <form method="post">
    {% for code, pregunta in controles %}
      <div class="control-item">
        <label><strong>{{ pregunta }}</strong></label>
        <div style="margin-top: 0.5em;">
          <label style="display: inline; margin-right: 1em;">
            <input type="radio" name="{{ code }}" value="sí" checked style="width: auto; margin-right: 0.5em;"> 
            ✅ Sí
          </label>
          <label style="display: inline;">
            <input type="radio" name="{{ code }}" value="no" style="width: auto; margin-right: 0.5em;"> 
            ❌ No
          </label>
        </div>
      </div>
    {% endfor %}
    
    <div class="nav-links">
      <button type="submit" class="btn btn-primary">📤 Enviar respuestas</button>
      <a href="{{ url_for('index') }}" class="btn btn-secondary">🏠 Volver al menú</a>
    </div>
  </form>
{% endblock %}

{% block extra_css %}
<style>
  .control-item {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5em;
    margin-bottom: 1.5em;
    transition: all 0.3s ease;
  }
  
  .control-item:hover {
    border-color: #0066cc;
    box-shadow: 0 2px 8px rgba(0,102,204,0.1);
  }
  
  .control-item label:first-child {
    color: #2c3e50;
    font-weight: bold;
    margin-bottom: 0.5em;
  }
  
  input[type="radio"] {
    width: auto !important;
    margin-right: 0.5em;
  }
</style>
{% endblock %}