{% extends 'patterns/organisms/header/simple_header_with_ui_switch.html' %}

{% block extra_classes %}xl:pt-32 xl:pb-16{% endblock %}

{% block description %}
   <div
      class="
         hidden gap-10 pb-4 font-bold pr-4 grid-cols-1 whitespace-pre-line [&_p]:!text-lg [&_p]:leading-7
         md:grid md:grid-cols-2 md:pr-0
      "
   >
    <p>
      {{ description_column_1|safe }}
    </p>

    <p>
      {{ description_column_2|safe }}
    </p>
  </div>
{% endblock %}

{% block switch %}
  <a @click="toggleView('candidates')" class="switch__item"
     :class="{'switch__item--active': isCurrentView('candidates')}">{{ choice_1 }}</a>
  <a @click="toggleView('program')" class="switch__item"
     :class="{'switch__item--active': isCurrentView('program')}">{{ choice_2 }}</a>
  <a @click="toggleView('other1')" class="switch__item"
     :class="{'switch__item--active': isCurrentView('other1')}">{{ choice_3 }}</a>
  <a @click="toggleView('other2')" class="switch__item"
     :class="{'switch__item--active': isCurrentView('other2')}">{{ choice_4 }}</a>
  <a @click="toggleView('teams')" class="switch__item"
     :class="{'switch__item--active': isCurrentView('teams')}">{{ choice_5 }}</a>
{% endblock %}
