{% asset 'webpageviewplus/webpageviewplus-css' %}
{% asset 'webpageviewplus/webpageviewplus-js' %}
{% if frame and refused %}
  {# A page browsers won't show here: a card instead of a blank frame. #}
  <div class="webpageviewplus-card webpageviewplus-refused" data-reason="{{ refused }}">
    <p class="webpageviewplus-card-title">{{ frame.title }}</p>
    {% if refused == 'mixed' %}
      <p>{{ _("This page can't be shown here: it's served over http://, which browsers block inside https:// sites.") }}</p>
    {% else %}
      <p>{{ _("{host} doesn't allow its pages to be shown inside other sites.").format(host=refused_host) }}</p>
    {% endif %}
    {% if 'open' in controls %}
      <a class="btn btn-sm btn-outline-secondary" href="{{ open_url }}" target="_blank" rel="noopener noreferrer">{{ _('Open in new tab') }}</a>
    {% endif %}
  </div>
{% elif frame %}
  {% set desc_id = ('webpageviewplus-desc-' ~ resource_view.id) if resource_view and resource_view.id and resource_view.description else none %}
  {# No skip link in the form's preview, which has no view id to key it on. #}
  {% set after_id = ('webpageviewplus-after-' ~ resource_view.id) if resource_view and resource_view.id else none %}
  <div class="webpageviewplus"{% if narrow_width %} data-narrow-width="{{ narrow_width }}"{% endif %}{% if count_url %} data-count-url="{{ count_url }}"{% endif %}>
    {# Warms the connection before the (lazy) frame needs it. Frame
       navigation isn't CORS, so no crossorigin. #}
    {% if preconnect and not held_back %}<link rel="preconnect" href="{{ preconnect }}">{% endif %}
    {% if after_id %}<a class="webpageviewplus-skip" href="#{{ after_id }}">{{ _('Skip embedded content') }}</a>{% endif %}
    {% set stage %}
    {# Touch screens, frames taller than half the screen: lets the page scroll
       past the frame until the reader taps it. Shown by the script. #}
    <button type="button" class="webpageviewplus-shield" data-webpageviewplus-shield
            aria-label="{{ _('Interact with {title}').format(title=frame.title) }}" hidden><span>{{ _('Tap to interact') }}</span></button>
    <iframe class="webpageviewplus-frame"
            title="{{ frame.title }}"
            src="{{ deferred_src if held_back else frame.src }}"
            {% if frame.sandbox is not none %}sandbox="{{ frame.sandbox }}"{% endif %}
            allow="{{ frame.allow }}"
            referrerpolicy="{{ frame.referrerpolicy }}"
            loading="lazy"
            {% if frame.credentialless %}credentialless{% endif %}
            style="{{ frame.style }}{% if color_scheme and color_scheme != 'auto' %};color-scheme:{{ color_scheme }}{% endif %}"
            data-preset="{{ frame.preset }}"
            data-height-mode="{{ frame.height_mode }}"
            data-frame-origin="{{ frame.origin }}"
            data-opaque="{{ 'true' if frame.opaque else 'false' }}"
            data-min-height="{{ frame.min_height }}"
            data-max-height="{{ frame.max_height }}"
            {% if desc_id %}aria-describedby="{{ desc_id }}"{% endif %}></iframe>
    {% endset %}
    {% if held_back %}
      {# Consent (a third-party page) or Save-Data: a card instead of the
         page, which the script loads from the template on request. Nothing
         is requested from the page's host until then. #}
      <div class="webpageviewplus-card" data-webpageviewplus-card data-reason="{{ held_back }}">
        <p class="webpageviewplus-card-title">{{ frame.title }}</p>
        {% if held_back == 'consent' %}
          <p>{{ _('This view loads content from {host}.').format(host=consent_host) }}</p>
        {% else %}
          <p class="text-muted">{{ _('Not loaded, to save data.') }}</p>
        {% endif %}
        <button type="button" class="btn btn-sm btn-outline-secondary" data-webpageviewplus-load>
          {#- TRANSLATORS: a button loading the embedded page; {size} is its file size, e.g. "1.2 MB". #}
          {%- if load_size %}{{ _('Load ({size})').format(size=load_size) }}{% else %}{{ _('Load') }}{% endif -%}
        </button>
      </div>
      <template data-webpageviewplus-stage>{{ stage }}</template>
    {% else %}
      {{ stage }}
    {% endif %}
    {% if desc_id %}<p id="{{ desc_id }}" class="visually-hidden">{{ resource_view.description }}</p>{% endif %}
    {# The skip link lands here: past the frame, before the control bar, so
       the next Tab reaches Open in new tab. #}
    {% if after_id %}<span id="{{ after_id }}" class="webpageviewplus-after" tabindex="-1"></span>{% endif %}
    <p class="webpageviewplus-sr" role="status" data-webpageviewplus-status
       data-loaded="{{ _('{title} loaded').format(title=frame.title) }}"></p>
    {% if connections %}
      <details class="webpageviewplus-connections small">
        <summary>{{ _('This page connects to') }}</summary>
        <ul>{% for host in connections %}<li>{{ host }}</li>{% endfor %}</ul>
      </details>
    {% endif %}
    {% if count_url %}
      <p class="webpageviewplus-counted small text-muted">
        {{ _('This view counts visits.') }}
        {% if privacy_policy_url %}<a href="{{ privacy_policy_url }}">{{ _('Privacy policy') }}</a>{% endif %}
      </p>
    {% endif %}
    {% if show_controls and controls %}
      {# TRANSLATORS: accessible name of the toolbar under an embedded web page. #}
      <div class="webpageviewplus-controls" role="toolbar" aria-label="{{ _('Embedded page') }}">
        {% if 'open' in controls %}
          <a class="btn btn-sm btn-outline-secondary" href="{{ open_url }}" target="_blank" rel="noopener noreferrer">{{ _('Open in new tab') }}</a>
        {% endif %}
        {# Shown by the script once it knows they work. #}
        {% if 'fullscreen' in controls %}
          {# Without element fullscreen (iPhone Safari) the script relabels it
             Expand: the view then fills the viewport in place. #}
          {# TRANSLATORS: "Expand" makes the embedded page fill the window; "Fullscreen" fills the screen. Buttons. #}
          <button type="button" class="btn btn-sm btn-outline-secondary" data-webpageviewplus-action="fullscreen" data-expand-label="{{ _('Expand') }}" aria-pressed="false" hidden>{{ _('Fullscreen') }}</button>
          {# TRANSLATORS: a button leaving the expanded (full-window) view. #}
          <button type="button" class="btn btn-sm btn-outline-secondary" data-webpageviewplus-action="close" hidden>{{ _('Close') }}</button>
        {% endif %}
        {% if 'reload' in controls %}
          {# TRANSLATORS: a button reloading the embedded page. #}
          <button type="button" class="btn btn-sm btn-outline-secondary" data-webpageviewplus-action="reload" data-reload-url="{{ open_url }}" hidden>{{ _('Reload') }}</button>
        {% endif %}
        {# Shares the CKAN page, not the frame's URL. Shown where
           navigator.share exists. #}
        {% if 'share' in controls and share_url %}
          {# TRANSLATORS: a button opening the device's share sheet for this page. #}
          <button type="button" class="btn btn-sm btn-outline-secondary" data-webpageviewplus-action="share" data-share-url="{{ share_url }}" data-share-title="{{ frame.title }}" hidden>{{ _('Share') }}</button>
        {% endif %}
      </div>
    {% elif 'open' in controls %}
      {# This view hides its bar, but the site still offers Open in new tab:
         shown only on narrow screens (and 400% zoom), where the frame is
         hardest to use. #}
      <a class="btn btn-sm btn-outline-secondary webpageviewplus-narrow-open" href="{{ open_url }}" target="_blank" rel="noopener noreferrer">{{ _('Open in new tab') }}</a>
    {% endif %}
  </div>
{% elif frame_error == 'host' %}
  <p class="text-muted">{{ _("This page can't be embedded: its host isn't on this site's list of allowed hosts.") }}</p>
{% else %}
  <p class="text-muted">{{ _('This page cannot be embedded: only http:// and https:// URLs are supported.') }}</p>
{% endif %}