{% import 'macros/form.html' as form %}
{% asset 'webpageviewplus/webpageviewplus-css' %}
{% asset 'webpageviewplus/webpageviewplus-js' %}
<div class="webpageviewplus-form">

{% set height_labels = {
  'fixed': _('Fixed (px)'),
  'viewport': _('Share of the window height, in percent'),
} %}

{% if not isolated %}
  <p class="text-muted">{{ _("This PDF can't be shown: the site needs a separate domain for uploaded content.") }}</p>
{% endif %}

{% call form.input('pdf_url', id='field-pdf_url', label=_('PDF url'), placeholder=_('eg. https://example.com/report.pdf  (if blank uses resource url)'), value=data.pdf_url, error=errors.pdf_url, classes=['control-full', 'control-large'], attrs={'class': 'form-control', 'aria-describedby': 'help-pdf_url'}) %}
  <p class="form-text" id="help-pdf_url">
    {{ _("Leave blank to show this resource's own file. A PDF on another site is fetched by this site and shown from here, so visitors never contact that site.") }}
    {% if allowed_hosts %}{{ _('This site accepts pages from these hosts only: {hosts}.').format(hosts=allowed_hosts | join(', ')) }}{% endif %}
  </p>
{% endcall %}

<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">
      {% 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 %}
  </div>
</div>

{% call form.input('height_value', id='field-height_value', label=_('Height value'), placeholder=_('eg. 800 or 80'), 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, or a number from 1 to 100 for a share of the window. Blank is 800 pixels.') }}</p>
{% endcall %}

{% if thumbnail_choices is not none %}
  <div class="form-group control-medium">
    <label class="form-label" for="field-thumbnail_resource">{{ _('Thumbnail in the resource list') }}</label>
    <div class="controls">
      <select id="field-thumbnail_resource" name="thumbnail_resource" class="form-control form-select" aria-describedby="help-thumbnail_resource">
        {# TRANSLATORS: no thumbnail image chosen (the image, feminine in some languages). #}
        <option value="" {% if not data.thumbnail_resource %}selected{% endif %}>{{ _('None') }}</option>
        <option value="pdf:first-page" {% if data.thumbnail_resource == 'pdf:first-page' %}selected{% endif %}>{{ _("The PDF's first page") }}</option>
        {% for image in thumbnail_choices %}
          <option value="{{ image.id }}" {% if data.thumbnail_resource == image.id %}selected{% endif %}>{{ image.name }}</option>
        {% endfor %}
      </select>
      {% if errors.thumbnail_resource %}<span class="error-block">{{ errors.thumbnail_resource | join(', ') }}</span>{% endif %}
      <p class="form-text" id="help-thumbnail_resource">{{ _("An image in this dataset (PNG, JPEG, WebP or GIF), shown small beside this resource in the dataset's list. With None, the format icon shows.") }}
        {{ _("The PDF's first page is drawn in your browser when you choose it, and again when you edit the view after an uploaded file has changed, or every time for a PDF linked from another site.") }}</p>
      <p class="form-text" role="status" aria-live="polite" data-webpageviewplus-first-page
         data-view-id="{{ data.id or '' }}"
         data-ready="{{ 'true' if first_page_ready else 'false' }}"
         data-open-url="{{ h.url_for('webpageviewplus_pdf.open_viewer', view_id=data.id) if data.id else '' }}"
         data-content-origin="{{ content_origin or '' }}"
         data-api="{{ h.url_for('api.action', ver=3, logic_function='webpageviewplus_pdf_thumbnail') }}"
         data-working="{{ _('Drawing the first page…') }}"
         data-done="{{ _('The first page is ready. Save the view to use it.') }}"
         data-failed="{{ _('Couldn\'t draw the first page. Check the PDF shows in the view, then try again.') }}"
         data-save-first="{{ _('Save the view first, then choose the first page again.') }}"></p>
    </div>
  </div>
{% endif %}

<div class="form-group">
  <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>
</div>