{% extends 'settings/base.html.twig' %}

{% block title %}Notification Settings{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <style>
    .form {
    display: none;
    clip-path: polygon(0 0);
    }

    {% for transport, form in tabbed_forms %}
      #form_toggle_{{ transport }}:checked ~ #form_{{ transport }} {
      display: flex;
      clip-path: none;
      }
    {% endfor %}
  </style>
{% endblock %}

{% block body %}
    <div class='content'>
        {% block primary_nav %}
            {{ parent() }}
        {% endblock primary_nav %}

        {% block form %}
            <div id='form-tabs'>
                <ul>
                    {% for transport, form in tabbed_forms %}
                        <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
                        <label for="toggle-{{ transport }}" id='tabs'>
                            {{ transport }}
                        </label>
                        <div id="form_{{ transport }}" class='form'>
                            {{ form(form) }}
                        </div>
                    {% endfor %}
                </ul>
            </div>
        {% endblock form %}
    </div>

{% endblock body %}