{% extends "global/Page.html" %}
{% block title %}Demographics{% endblock %}
{% block content %}
<style>
    .demographics-container { max-width: 720px; margin: 0 auto; }
    .demographics-instructions { background: #f0f4ff; border-left: 4px solid #667eea; padding: 20px; border-radius: 4px; margin-bottom: 20px; }
    .demographics-instructions p { margin: 0; color: #1f2937; line-height: 1.6; }
    .form-group { margin-bottom: 24px; }
    .form-group label { display: block; font-weight: 600; color: #1f2937; margin-bottom: 10px; font-size: 15px; }
    .form-group select { width: 100%; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 15px; background-color: white; cursor: pointer; }
    .form-group select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12); }
    .form-group input[type="text"] { width: 100%; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 15px; box-sizing: border-box; }
    .form-group input[type="text"]:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12); }
    .self-describe-group { display: none; margin-top: 12px; padding: 12px; background: #f9fafb; border-radius: 6px; }
    .self-describe-group.show { display: block; }
</style>

<div class="demographics-container">
  <div class="demographics-instructions">
    <p>Thank you for completing the colleague survey. Please answer a few quick demographic questions.</p>
  </div>

  <form method="post" id="demographicsForm">
    <div class="form-group">
      <label for="id_gender">What is your gender?</label>
      <select name="gender" id="id_gender" onchange="toggleSelfDescribe()">
        <option value="">-- Select --</option>
        <option value="Man" {% if gender_value == "Man" %}selected{% endif %}>Man</option>
        <option value="Woman" {% if gender_value == "Woman" %}selected{% endif %}>Woman</option>
        <option value="Non-binary" {% if gender_value == "Non-binary" %}selected{% endif %}>Non-binary</option>
        <option value="Prefer to self-describe" {% if gender_value == "Prefer to self-describe" %}selected{% endif %}>Prefer to self-describe</option>
        <option value="Prefer not to say" {% if gender_value == "Prefer not to say" %}selected{% endif %}>Prefer not to say</option>
      </select>
    </div>
    
    <div class="form-group self-describe-group" id="selfDescribeGroup">
      <label for="id_gender_self_describe">Please describe your gender:</label>
      <input type="text" name="gender_self_describe" id="id_gender_self_describe" placeholder="Enter your gender identity" maxlength="150" value="{{ gender_self_describe_value }}">
    </div>
    
    <div class="form-group">
      <label for="id_tenure_years">How long have you worked at this company?</label>
      <select name="tenure_years" id="id_tenure_years">
        <option value="">-- Select --</option>
        <option value="Less than 1 year" {% if tenure_years_value == "Less than 1 year" %}selected{% endif %}>Less than 1 year</option>
        <option value="1-2 years" {% if tenure_years_value == "1-2 years" %}selected{% endif %}>1-2 years</option>
        <option value="3-4 years" {% if tenure_years_value == "3-4 years" %}selected{% endif %}>3-4 years</option>
        <option value="5 years or more" {% if tenure_years_value == "5 years or more" %}selected{% endif %}>5 years or more</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="id_work_location">How often do you come to work in person (versus remote)?</label>
      <select name="work_location" id="id_work_location">
        <option value="">-- Select --</option>
        <option value="Exclusively in-person" {% if work_location_value == "Exclusively in-person" %}selected{% endif %}>Exclusively in-person</option>
        <option value="Mostly in-person (4-5 days/week)" {% if work_location_value == "Mostly in-person (4-5 days/week)" %}selected{% endif %}>Mostly in-person (4-5 days/week)</option>
        <option value="Hybrid (2-3 days/week)" {% if work_location_value == "Hybrid (2-3 days/week)" %}selected{% endif %}>Hybrid (2-3 days/week)</option>
        <option value="Mostly remote (1 day/week or less)" {% if work_location_value == "Mostly remote (1 day/week or less)" %}selected{% endif %}>Mostly remote (1 day/week or less)</option>
        <option value="Exclusively remote" {% if work_location_value == "Exclusively remote" %}selected{% endif %}>Exclusively remote</option>
      </select>
    </div>

    <button type="submit">Submit Demographics</button>
  </form>
</div>

<script>
function toggleSelfDescribe() {
  const genderSelect = document.getElementById('id_gender');
  const selfDescribeGroup = document.getElementById('selfDescribeGroup');
  
  if (genderSelect.value === 'Prefer to self-describe') {
    selfDescribeGroup.classList.add('show');
  } else {
    selfDescribeGroup.classList.remove('show');
  }
}

// Check on page load if "Prefer to self-describe" is already selected (e.g., after validation error)
document.addEventListener('DOMContentLoaded', function() {
  toggleSelfDescribe();
});
</script>
{% endblock %}