{% import 'macros/form.html' as form %}

{% set preset_labels = {
  'strict': _('Strict: static HTML, no scripts'),
  'interactive': _('Interactive: scripts, forms, popups and downloads, no storage'),
  'external': _('External: a trusted third-party site, no sandbox') if isolated
    else _('External: a trusted third-party site, no sandbox (runs as Interactive for now)'),
  'data-schematic': _('Data Schematic: qsv Data Schematics'),
} %}
{# TRANSLATORS: how the embedded page's height is set; "Auto" means the page reports its own height. #}
{% set height_labels = {
  'auto': _('Auto'),
  'fixed': _('Fixed (px)'),
  'viewport': _('Share of the window height, in percent'),
  'aspect': _('Aspect ratio (e.g. 16/9)'),
} %}

{# TRANSLATORS: names of security presets, as in "the External preset". #}
{% set preset_names = {
  'strict': _('Strict'),
  'interactive': _('Interactive'),
  'external': _('External'),
  'data-schematic': _('Data Schematic'),
} %}

{% asset 'webpageviewplus/webpageviewplus-js' %}
{% call form.input('page_url', id='field-page_url', label=_('Web Page url'), placeholder=_('eg. http://example.com  (if blank uses resource url)'), value=data.page_url, error=errors.page_url, classes=['control-full', 'control-large'], attrs={'class': 'form-control', 'aria-describedby': 'help-page_url'}) %}
  <p class="form-text" id="help-page_url">
    {# TRANSLATORS: {services} is a comma-separated list of service names, such as "YouTube, Vimeo, Datawrapper". #}
    {{ _('Leave blank to show this resource\'s own address. Paste a link from {services} and the form suggests its embed address and settings.').format(services=service_names | join(', ')) }}
    {% if allowed_hosts %}{{ _('This site accepts pages from these hosts only: {hosts}.').format(hosts=allowed_hosts | join(', ')) }}{% endif %}
  </p>
{% endcall %}
{# Well-known services (YouTube, Datawrapper...): offers the embed address
   and the settings the embed needs. Filled in by the script. #}
<div class="webpageviewplus-service" role="status" aria-live="polite"
     data-webpageviewplus-service
     data-api="{{ h.url_for('api.action', ver=3, logic_function='webpageviewplus_service_suggest') }}"
     data-resource-id="{{ resource.id }}"
     data-preset-names="{{ preset_names | tojson | forceescape }}"
     data-found="{{ _('This is a {service} page. Use its embed address and the settings its embed needs?') }}"
     {# TRANSLATORS: a button accepting the suggested embed address and settings. #}
     data-apply="{{ _('Use them') }}"
     data-applied="{{ _('Using the embed address and settings for {service}. Save the view to keep them.') }}"
     data-needs-content-origin="{{ _('{service} only works with the {preset} preset, which this site runs as Interactive until it serves uploads from a separate content origin, so it won\'t play here yet.') }}"
     data-preset-not-allowed="{{ _('{service} only works with the {preset} preset, which this site doesn\'t allow.') }}"
     data-host-not-allowed="{{ _('{service} embeds come from {host}, which isn\'t on this site\'s list of allowed hosts.') }}"></div>
{% if frameability_check %}
  <div class="webpageviewplus-frameability" role="status" aria-live="polite"
       data-webpageviewplus-frameability
       data-api="{{ h.url_for('api.action', ver=3, logic_function='webpageviewplus_frameability') }}"
       data-resource-id="{{ resource.id }}"
       data-blocked="{{ _('This site refuses to be embedded ({reason}), so the view will show an error. Consider linking to it instead.') }}"
       data-unknown="{{ _('Couldn\'t check whether this site allows embedding.') }}"></div>
{% endif %}

<div class="form-group control-medium">
  <label class="form-label" for="field-preset">{{ _('Security preset') }}</label>
  <div class="controls">
    <select id="field-preset" name="preset" class="form-control form-select" aria-describedby="help-preset">
      {% for name in presets %}
        <option value="{{ name }}" {% if (data.preset or default_preset) == name %}selected{% endif %}>{{ preset_labels.get(name, name) }}</option>
      {% endfor %}
    </select>
    {% if errors.preset %}<span class="error-block">{{ errors.preset | join(', ') }}</span>{% endif %}
    <p class="form-text" id="help-preset">
      {{ _('Choose the most restrictive preset that works: if the page stays blank or broken, try the next one.') }}
      {% if 'external' in presets %}{{ _('External turns the sandbox off, so use it only for sites you trust.') }}{% endif %}
    </p>
  </div>
</div>

{% if frame and 'degraded' in frame.notices %}
  <div class="alert alert-warning">
    {{ _('This preset needs uploaded HTML to be served from a separate content origin, which this site doesn\'t have yet, so the view runs as Interactive.') }}
    {% if (data.preset or default_preset) == 'data-schematic' %}{{ _('Charts, the Tour and Explore work, but maps stay blank.') }}{% endif %}
  </div>
{% endif %}
{% if frame and 'same_origin_fallback' in frame.notices %}
  <div class="alert alert-warning">{{ _('This view\'s sandbox would let scripts keep a real origin, which isn\'t allowed here, so it runs as Strict.') }}</div>
{% endif %}
{% if frame and 'credentialless' in frame.notices %}
  <div class="alert alert-info">{{ _('In Chrome and Edge, this site loads pages with this preset without the visitor\'s cookies or saved data, so logins inside the page and sign-in popups won\'t work.') }}</div>
{% endif %}

<div class="form-group control-medium">
  <label class="form-label" for="field-height_mode">{{ _('Height') }}</label>
  <div class="controls">
    <select id="field-height_mode" name="height_mode" class="form-control form-select" aria-describedby="help-height_mode">
      <option value="" {% if not data.height_mode %}selected{% endif %}>{{ _("Preset's default") }}</option>
      {% for mode in height_modes %}
        <option value="{{ mode }}" {% if data.height_mode == mode %}selected{% endif %}>{{ height_labels.get(mode, mode) }}</option>
      {% endfor %}
    </select>
    {% if errors.height_mode %}<span class="error-block">{{ errors.height_mode | join(', ') }}</span>{% endif %}
    <p class="form-text" id="help-height_mode">{{ _('Auto fits pages that report their own height, such as qsv Data Schematics. Other pages keep a fixed fallback height.') }}</p>
  </div>
</div>

{% call form.input('height_value', id='field-height_value', label=_('Height value'), placeholder=_('eg. 600, 80 or 16/9'), value=data.height_value, error=errors.height_value, classes=['control-medium'], attrs={'class': 'form-control', 'aria-describedby': 'help-height_value'}) %}
  <p class="form-text" id="help-height_value">{{ _('Pixels for Fixed, a number from 1 to 100 for a share of the window, or a ratio such as 16/9. Auto and the preset\'s default need no value.') }}</p>
{% endcall %}

<div class="form-group control-medium">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="field-hide_controls" name="hide_controls" value="true" aria-describedby="help-hide_controls" {% if data.hide_controls in (true, 'true', 'True') %}checked{% endif %}>
    <label class="form-check-label" for="field-hide_controls">{{ _('Hide the control bar (Open in new tab, Fullscreen, Reload)') }}</label>
    <p class="form-text" id="help-hide_controls">{{ _('On phones and at high zoom, Open in new tab still shows, so visitors can always reach the page.') }}</p>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="field-consent_gate" name="consent_gate" value="true" aria-describedby="help-consent_gate" {% if data.consent_gate in (true, 'true', 'True') %}checked{% endif %}>
    <label class="form-check-label" for="field-consent_gate">{{ _('Ask before loading a page from another site') }}</label>
    <p class="form-text" id="help-consent_gate">{{ _('Visitors see a card naming the site, and nothing loads from it until they choose Load. Uploads and pages on this site load as usual.') }}</p>
  </div>
  {% if view_counting %}
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="field-count_views" name="count_views" value="true" {% if data.count_views in (true, 'true', 'True') %}checked{% endif %}>
      <label class="form-check-label" for="field-count_views">{{ _('Count visits (daily totals only, nothing about visitors; the view says so)') }}</label>
    </div>
    {% if view_counts and data.count_views in (true, 'true', 'True') %}
      {% set t = view_counts.totals %}
      <p class="form-text webpageviewplus-counts">
        {# TRANSLATORS: view counts as "label: number" pairs, so no plural forms are needed. #}
        {{ _('Last 30 days. Shown: {impressions}. Seen: {seen}. Loaded: {loaded}. Used: {engaged}. Failed: {failed}.').format(**t) }}
      </p>
    {% endif %}
  {% endif %}
</div>

{% if can_set_advanced %}
  <fieldset class="webpageviewplus-advanced">
    {# TRANSLATORS: heading of the advanced (sysadmin-only) settings. #}
    <legend>{{ _('Advanced') }}</legend>
    <p class="form-text">{{ _('Each field replaces the preset\'s value; leave it blank to keep the preset\'s. A sandbox with both allow-scripts and allow-same-origin is refused wherever it could let a page act as this site.') }}</p>
    {{ form.input('sandbox', id='field-sandbox', label=_('Sandbox tokens (replace the preset\'s)'), placeholder=_('eg. allow-scripts allow-popups'), value=data.sandbox, error=errors.sandbox, classes=['control-full']) }}
    {{ form.input('allow', id='field-allow', label=_('Allowed features (replace the preset\'s)'), placeholder=_('eg. fullscreen; clipboard-write'), value=data.allow, error=errors.allow, classes=['control-full']) }}
    <div class="form-group control-medium">
      <label class="form-label" for="field-referrer_policy">{{ _('Referrer policy') }}</label>
      <div class="controls">
        <select id="field-referrer_policy" name="referrer_policy" class="form-control form-select">
          <option value="" {% if not data.referrer_policy %}selected{% endif %}>{{ _("Site default") }}</option>
          {% for policy in referrer_policies %}
            <option value="{{ policy }}" {% if data.referrer_policy == policy %}selected{% endif %}>{{ policy }}</option>
          {% endfor %}
        </select>
        {% if errors.referrer_policy %}<span class="error-block">{{ errors.referrer_policy | join(', ') }}</span>{% endif %}
      </div>
    </div>
  </fieldset>
{% endif %}