

{% render 'contrast-override', background_color: section.settings.background_color, section_id: section.id %}

<div
  class="password-footer color-custom-{{ section.id }}"
  data-testid="password-footer"
>
  <p class="password-footer__powered-by">
    {{ 'content.powered_by' | t }}
    <a
      href="//shopify.com"
      rel="nofollow"
      target="_blank"
      aria-label="Shopify"
      aria-describedby="a11y-new-window-message"
    >
      {{- 'icon-shopify.svg' | inline_asset_content -}}
    </a>
  </p>
  <div class="password-footer__links">
    <button
      class="button-unstyled password-footer__button"
      on:click="#password-form/showDialog"
    >
      {{ 'actions.enter_using_password' | t }}
    </button>
    <p class="password-footer__admin-link">
      {{ 'content.store_owner_link_html' | t: link: '/admin' }}
    </p>
  </div>
  <ul hidden>
    <li id="a11y-new-window-message">{{ 'accessibility.new_window' | t }}</li>
  </ul>
</div>

{% stylesheet %}
  .password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.footer_password",
  "class": "section-wrapper",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "t:settings.background_color",
      "placeholder": "t:settings.default"
    }
  ]
}
{% endschema %}
