{% import '../../macros.twig' as macros %}
{% set data = home_hero_microsite %}

<!-- components/home-hero-microsite/home-hero-microsite.twig -->
<header class="home-hero-microsite">

    {% if data.video %}

        <div class="home-hero-microsite-video">
        {{
            macros.responsiveHtmlVideo(
            data.video.sources,
            ['home-hero-microsite-player', 'js-video-player'],
            {'autoplay': '', 'muted': '', 'loop': '', 'playsinline': '' }
            )
        }}
        </div>

    {% elseif data.background %}
        <div class="home-hero-microsite-background">
        <img src="{{ data.background.src }}" alt="">
        </div>
    {% endif %}

    <div class="home-hero-microsite-inner">

        <div class="home-hero-microsite-logo">
        <img src="{{ data.logo.src }}" alt="{{ data.logo.alt }}">
        </div>

        {% if data.text or data.button %}
        <div class="home-hero-microsite-content">

            {% if data.text %}
            <div class="home-hero-microsite-text wysiwyg-content">
                {{ data.text }}
            </div>
            {% endif %}

            {% if data.button %}
            <div class="home-hero-microsite-button">
                <a class="btn -white" href="{{ data.button.url }}">{{ data.button.text }}</a>
            </div>
            {% endif %}

        </div>
        {% endif %}

    </div>
</header>

{% set data = interior_hero_microsite %}

<!-- components/interior-hero-microsite/interior-hero-microsite.twig -->
<header class="interior-hero-microsite">

    {% if data.background_image %}
    <div class="interior-hero-microsite-background">
        <img src="{{ data.background_image }}" alt="">
    </div>
    {% endif %}

    <div class="interior-hero-microsite-inner">
        <h1 class="h1">{{ data.title }}</h1>
        {% if data.text %}
        <div class="interior-hero-microsite-text wysiwyg-content">
            <p>{{ data.text }}</p>
        </div>
        {% endif %}

        {% include '../breadcrumbs/breadcrumbs.twig' with { data: data.breadcrumbs } %}

    </div>

</header>

{% set data = site_header_microsite %}
{% import '../../../macros.twig' as macros %}

<!-- components/site-header-microsite/site-header-microsite.twig -->
<header class="site-header-microsite {{ data.logged_in ? '-logged-in' : ''}}">

  {# Main Nav #}
  <nav class="site-header-microsite-nav" aria-label="{{ 'Main Site Navigation'|t }}">
    <div class="site-header-microsite-logo-meta">
      <a href="/" class="site-header-microsite-logo">
        <img src="{{ data.logo.default.src }}" alt="{{ data.logo.alt }}" class="site-header-microsite-logo-img">
        <img src="{{ data.logo.white.src }}" alt="{{ data.logo.alt }}" class="site-header-microsite-logo-img-white">
      </a>
      <div class="site-header-microsite-meta">
        <p>{{ data.microsite_meta.date }}</p>
        <p>{{ data.microsite_meta.location }}</p>
      </div>
    </div>
    <div class="site-header-microsite-nav-wrapper">

      <ul class="site-header-microsite-utility-nav" aria-role="Navigation">

        {# non CMS back to main site link #}
        <li class="site-header-microsite-utility-nav-item -main-site"><a href="https://www.asce.org"><span>{{ 'ASCE.org' }}</span></a></li>

        {# Can have call for submissions link OR a CMS editable link #}
        {% if data.utility_nav_link.call_for_submissions.url %}
          <li class="site-header-microsite-utility-nav-item -submissions"><a href="{{ data.utility_nav_link.call_for_submissions.url }}"><span>{{ 'Call for Submissions' }}</span></a></li>
        {% elseif data.utility_nav_link.text_link %}
          <li class="site-header-microsite-utility-nav-item"><a href="{{ data.utility_nav_link.text_link.url }}"><span>{{ data.utility_nav_link.text_link.text }}</span></a></li>
        {% endif %}

        {% if data.logged_in %}

          <li class="site-header-microsite-utility-nav-btn -left-btn">

            <button
              type="button"
              class="site-header-microsite-utility-nav-link js-site-header-dropdown-toggle"
              aria-expanded="false"
              aria-controls="site-header-dropdown-{{ data.user.text|lower|replace({' ': '', '&': '-'}) }}"
              data-dropdown="true"
            >{{ data.user.text }}</button>

            <div
              id="site-header-microsite-dropdown-{{ data.user.text|lower|replace({' ': '', '&': '-'}) }}"
              class="site-header-microsite-dropdown js-site-header-dropdown"
              aria-hidden="true"
            >
              <ul class="site-header-microsite-dropdown-link-list">
                {% for link in data.user.dropdown %}
                  <li><a href="{{ link.url }}" class="-underline">{{ link.text }}</a></li>
                {% endfor %}
              </ul>
            </div>

          </li>
          <li class="site-header-microsite-utility-nav-btn -right-btn">
            <a
              href="#"
              class="site-header-microsite-utility-nav-link"
            >
              <span>{{ 'Register'|t }}</span>
            </a>
          </li>

        {% else %}

          <li class="site-header-microsite-utility-nav-btn -left-btn">
            <a
              href="#"
              class="site-header-microsite-utility-nav-link"
            >
              <span>{{ 'Login'|t }}</span>
            </a>
          </li>
          <li class="site-header-microsite-utility-nav-btn -right-btn">
            <a
              href="#"
              class="site-header-microsite-utility-nav-link"
            >
              <span>{{ 'Join'|t }}</span>
            </a>
          </li>

        {% endif %}

      </ul>

      <ul class="site-header-microsite-main-nav">
        {% for item in data.main_nav %}
          <li class="site-header-microsite-main-nav-item">

            {% if item.dropdown %}

              <button
                type="button"
                class="site-header-microsite-main-nav-item-link js-site-header-dropdown-toggle"
                aria-expanded="false"
                aria-controls="site-header-dropdown-{{ item.text|lower|replace({' ': '', '&': '-'}) }}"
                data-dropdown="true"
              >{{ item.text }}</button>

              <div
                id="site-header-microsite-dropdown-{{ item.text|lower|replace({' ': '', '&': '-'}) }}"
                class="site-header-microsite-dropdown js-site-header-dropdown"
                aria-hidden="true"
              >
                <ul class="site-header-microsite-dropdown-link-list">
                  {% for link in item.dropdown %}
                    <li><a href="{{ link.url }}" class="-underline">{{ link.text }}</a></li>
                  {% endfor %}
                </ul>
              </div>

            {% else %}
              <a class="site-header-microsite-main-nav-item-link" href="{{ item.url }}">{{ item.text }}</a>
            {% endif %}

          </li>
        {% endfor %}
      </ul>
    </div>
  </nav>

</header>

<!-- components/mobile-header/microsite/mobile-header-microsite.twig -->
<header class="mobile-header-microsite">
  <div class="mobile-header-microsite-inner">
    <a href="/" class="mobile-header-microsite-logo">
      <img src="{{ site_header_microsite.logo.default.src }}" alt="{{ site_header_microsite.logo.alt }}" class="mobile-header-microsite-logo-img">
      <img src="{{ site_header_microsite.logo.white.src }}" alt="{{ site_header_microsite.logo.alt }}" class="mobile-header-microsite-logo-img-white">
    </a>
    <div class="mobile-header-microsite-nav">

      {% if user_logged_in %}
        <a href="#" class="btn -small">{{ 'Jane'|t }}</a>
      {% else %}
        <a href="#" class="btn -small">{{ 'Login'|t }}</a>
      {% endif %}

      <button type="button" class="mobile-menu-microsite-trigger js-mobile-menu-microsite-toggle">
        <span class="sr-text">Mobile Menu</span>
      </button>

    </div>
  </div>
</header>

{% set data = site_header_microsite %}
{# {% set user_data = site_header_logged_in.utility_nav[2] %} #}

<!-- components/mobile-menu-microsite/mobile-menu-microsite.twig -->
<div class="mobile-menu-microsite" aria-hidden="true">

  <div class="mobile-menu-microsite-inner">

    <div class="mobile-menu-microsite-cta">
      <a href="#" class="btn -white">{{ 'Register' }}</a>
    </div>

    <div class="mobile-menu-microsite-text-cta">
      <a href="#" class="-arrow-link -white">{{ 'Call for submissions' }}</a>
    </div>

    <div class="accordion">

      <ul class="accordion-items">
        {% for item in data.main_nav %}

          {% if item.dropdown %}

            <li class="accordion-item" data-expanded="false">

              <button
                id="accordion-{{ accordionId ~ '-' ~ loop.index }}"
                class="accordion-trigger"
                aria-expanded="false"
                aria-controls="accordion-item-{{ accordionId ~ '-' ~ loop.index }}"
              >{{ item.text }}</button>

              <div
                id="accordion-item-{{ accordionId ~ '-' ~ loop.index }}"
                class="accordion-content"
                role="region"
                aria-labelledby="accordion-{{ accordionId ~ '-' ~ loop.index }}"
                aria-hidden="true"
              >
                <ul class="site-header-microsite-accordion-link-list">
                  {% for link in item.dropdown %}
                    <li><a href="{{ link.url }}">{{ link.text }}</a></li>
                  {% endfor %}
                </ul>
              </div>
            </li>

          {% else %}
            <li class="accordion-item">
              <a class="accordion-link" href="{{ item.url }}">{{ item.text }}</a>
            </li>
          {% endif %}

        {% endfor %}
      </ul>

    </div>

    <div class="mobile-menu-microsite-footer">

      {% if user_logged_in %}

        <div class="mobile-menu-microsite-manage">
          <a href="#">{{ 'Manage My Account' }}</a>
        </div>

        <div class="mobile-menu-microsite-logout">
          <a href="#">{{ 'Logout' }}</a>
        </div>
      {% endif %}

      <div class="mobile-menu-microsite-back">
        <a href="#">{{ 'Back to ASCE.org' }}</a>
      </div>

    </div>

  </div>
</div>

{% set data = site_footer_microsite %}

{# using same outer structure as site-footer but need extra class for microsite #}
<footer class="site-footer site-footer-microsite">
  <div class="site-footer-inner">

    {# Top section #}
    <div class="site-footer-microsite-main">

      {# Logo area #}
      <div class="site-footer-microsite-logo-meta">
        <a href="/" class="site-footer-microsite-logo">
          <img src="{{ site_header_microsite.logo.default.src }}" alt="{{ site_header_microsite.logo.alt }}">
        </a>
        <div class="site-footer-microsite-meta">
          <p>{{ site_header_microsite.microsite_meta.date }}</p>
          <p>{{ site_header_microsite.microsite_meta.location }}</p>
        </div>
      </div>

      {# Main nav links from site header #}
      <div class="site-footer-microsite-main-nav">
        <ul>
        {% for item in site_header_microsite.main_nav %}
          <li><a href="{{ item.url }}">{{ item.text }}</a></li>
        {% endfor %}
        </ul>
      </div>

    </div>

    {# Bottom section #}
    <div class="site-footer-microsite-secondary">

      {# Copyright #}
      <div class="site-footer-microsite-copyright">
        <p>&copy; {{ "now"|date("Y") }} {{ site_header_microsite.microsite_meta.title }} American Society of Civil Engineers</p>
      </div>

      {# footer links #}
      <div class="site-footer-microsite-links">
        <ul>
          {% for item in data.footer_links %}
            <li><a href="{{ item.url }}">{{ item.text }}</a></li>
          {% endfor %}
        </ul>
      </div>

    </div>

  </div>
</footer>