{% extends "django_program/manage/base.html" %}

{% block title %}{% if is_create %}Add Activity{% else %}Edit Activity{% endif %}{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="{% url 'manage:dashboard' conference.slug %}">Dashboard</a>
  <span class="breadcrumb-separator"></span>
  <a href="{% url 'manage:activity-list' conference.slug %}">Activities</a>
  <span class="breadcrumb-separator"></span>
  <span>{% if is_create %}Add{% else %}Edit{% endif %}</span>
</nav>
{% endblock %}

{% block page_title %}
<h1>{% if is_create %}Add Activity{% else %}Edit Activity: {{ activity.name }}{% endif %}</h1>
{% endblock %}

{% block content %}
<div class="form-container">
  <form method="post">
    {% csrf_token %}
    {% for field in form %}
    <div class="form-group">
      <label for="{{ field.id_for_label }}">{{ field.label }}</label>
      {% if field.name == "room" %}
      <div style="position: relative;">
        <input type="text" id="room-search" placeholder="Search rooms..." autocomplete="off"
               style="margin-bottom: 0.25rem;">
        {{ field }}
        <div id="room-results" style="display:none; position:absolute; z-index:10; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); width:100%; max-height:200px; overflow-y:auto; box-shadow:var(--shadow-md);"></div>
      </div>
      {% else %}
      {{ field }}
      {% endif %}
      {% if field.help_text %}
      <span class="helptext">{{ field.help_text }}</span>
      {% endif %}
      {% if field.errors %}
      <ul class="errorlist">
        {% for error in field.errors %}
        <li>{{ error }}</li>
        {% endfor %}
      </ul>
      {% endif %}
    </div>
    {% endfor %}
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">{% if is_create %}Create Activity{% else %}Save Changes{% endif %}</button>
      <a href="{% url 'manage:activity-list' conference.slug %}" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</div>

{% if not is_create and signup_count %}
<h2 class="section-heading" style="margin-top: 2rem;">Signups ({{ signup_count }})</h2>
<p style="color: var(--color-text-secondary); font-size: 0.9rem;">{{ signup_count }} confirmed{% if waitlist_count %}, {{ waitlist_count }} waitlisted{% endif %}</p>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
(function() {
  var searchInput = document.getElementById('room-search');
  var selectEl = document.getElementById('id_room');
  var resultsDiv = document.getElementById('room-results');
  if (!searchInput || !selectEl) return;

  var allOptions = [];
  for (var i = 0; i < selectEl.options.length; i++) {
    var opt = selectEl.options[i];
    allOptions.push({value: opt.value, text: opt.text});
  }

  // Show current selection in search input
  if (selectEl.value) {
    for (var j = 0; j < allOptions.length; j++) {
      if (allOptions[j].value === selectEl.value) {
        searchInput.value = allOptions[j].text === '---------' ? '' : allOptions[j].text;
        break;
      }
    }
  }

  function showResults(filter) {
    resultsDiv.innerHTML = '';
    var lowerFilter = (filter || '').toLowerCase();
    var matches = allOptions.filter(function(o) {
      return o.text !== '---------' && (!lowerFilter || o.text.toLowerCase().indexOf(lowerFilter) !== -1);
    });
    if (matches.length === 0) {
      resultsDiv.style.display = 'none';
      return;
    }
    matches.forEach(function(o) {
      var div = document.createElement('div');
      div.textContent = o.text;
      div.style.padding = '0.4rem 0.75rem';
      div.style.cursor = 'pointer';
      div.style.fontSize = '0.9rem';
      div.addEventListener('mousedown', function(e) {
        e.preventDefault();
        selectEl.value = o.value;
        searchInput.value = o.text;
        resultsDiv.style.display = 'none';
      });
      div.addEventListener('mouseenter', function() {
        div.style.background = 'var(--color-primary-light)';
      });
      div.addEventListener('mouseleave', function() {
        div.style.background = '';
      });
      resultsDiv.appendChild(div);
    });
    resultsDiv.style.display = 'block';
  }

  searchInput.addEventListener('focus', function() { showResults(searchInput.value); });
  searchInput.addEventListener('input', function() { showResults(searchInput.value); });
  searchInput.addEventListener('blur', function() {
    setTimeout(function() { resultsDiv.style.display = 'none'; }, 150);
  });

  // Allow clearing
  searchInput.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      resultsDiv.style.display = 'none';
      searchInput.blur();
    }
    if (e.key === 'Backspace' && searchInput.value === '') {
      selectEl.value = '';
    }
  });
})();
</script>
{% endblock %}