{% block content %}
<form method="post">
  {% csrf_token %}

  {% with template_name="semandjic/recursive_form.html" %}
  {% include template_name with forms=forms only %}
  {% endwith %}

  <button type="submit" class="submit-button">Submit</button>
</form>

<script>
  function toggleSection(prefix) {
    const section = document.getElementById(prefix + '_section');
    const arrow = document.getElementById(prefix + '_arrow');
    const isHidden = section.style.display === 'none';

    section.style.display = isHidden ? 'block' : 'none';
    arrow.textContent = isHidden ? '▼' : '▶';

    // Store state in localStorage
    localStorage.setItem(prefix + '_expanded', isHidden);
  }

  // Restore saved states on page load
  document.addEventListener('DOMContentLoaded', function() {
    const allSections = document.querySelectorAll('.form-section');
    allSections.forEach(section => {
      const prefix = section.getAttribute('data-prefix');
      const wasExpanded = localStorage.getItem(prefix + '_expanded') === 'true';
      const sectionContent = document.getElementById(prefix + '_section');
      const arrow = document.getElementById(prefix + '_arrow');

      if (sectionContent && arrow) {
        sectionContent.style.display = wasExpanded ? 'block' : 'none';
        arrow.textContent = wasExpanded ? '▼' : '▶';
      }
    });
  });
</script>

<style>
  .form-section {
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .form-section .form-section {
    margin: 10px;
  }

  .section-header {
    margin: 0;
    padding: 10px;
    background: #f5f5f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
  }

  .section-header:hover {
    background: #e9e9e9;
  }

  .section-content {
    padding: 10px;
  }

  .section-arrow {
    margin-right: 8px;
    font-size: 0.8em;
  }

  .submit-button {
    margin: 20px 0;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .submit-button:hover {
    background: #0056b3;
  }
</style>
{% endblock %}