{% load components %}
{# Django template for Banner #}
{% with effective_tld=tld|default:'.gov' %}
<section
  id="{{ id|default:'gov-banner' }}"
  class="usa-banner usx-banner {{ className }}"
  aria-label="{{ ariaLabel|default:'Official government website' }}"
>
  <div id="{{ id|default:'gov-banner' }}-accordion" class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img
            aria-hidden="true"
            class="usa-banner__header-flag"
            src="{% asset_url flagSrc|default:'img/us_flag_small.png' staticBaseUrl %}"
            alt=""
          />
        </div>
        <div
          class="grid-col-fill tablet:grid-col-auto"
          aria-hidden="true"
        >
          <p class="usa-banner__header-text">
            {{ bannerText|default:'An official website of the United States government' }}
          </p>
          <p class="usa-banner__header-action">{{ bannerActionText|default:"Here's how you know" }}</p>
        </div>
        <button
          type="button"
          class="usa-accordion__button usa-banner__button"
          aria-expanded="false"
          aria-controls="{{ id|default:'gov-banner' }}-content"
        >
          <span class="usa-banner__button-text">{{ bannerActionText|default:"Here's how you know" }}</span>
        </button>
      </div>
    </header>
    <div
      class="usa-banner__content usa-accordion__content"
      id="{{ id|default:'gov-banner' }}-content"
      hidden
    >
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="{% asset_url 'img/icon-dot-gov.svg' staticBaseUrl %}"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>{% if domainHeading %}{{ domainHeading }}{% else %}Official websites use {{ effective_tld }}{% endif %}</strong><br/>
              {% if domainText %}{{ domainText }}{% else %}A {{ effective_tld }} website belongs to an official government organization in the United States.{% endif %}
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="{% asset_url 'img/icon-https.svg' staticBaseUrl %}"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>{% if httpsHeading %}{{ httpsHeading }}{% else %}Secure {{ effective_tld }} websites use HTTPS{% endif %}</strong><br/>
              {% if httpsText %}{{ httpsText|safe }}{% else %}A <strong>lock</strong> ({% icon name="lock" size=1 staticBaseUrl=staticBaseUrl ariaHidden=True focusable=False %}{% endicon %}) or <strong>https://</strong> means you've safely connected to the {{ effective_tld }} website. Share sensitive information only on official, secure websites.{% endif %}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endwith %}