{% extends "baseWidgetEditor.html" %}
{% include "formMacros.html" %}

{% block modalClass %}
  {{widgetEditorClass}} apos-ui-modal-no-sidebar
{% endblock %}

{% block modalLabel %}
  {{ __('Display %s', pluralPieceLabel ) }}
{% endblock %}

{% block modalInstructions %}
<p>{{ __('You can select content to display by entering the titles of individual %s, %s, or tags.', pluralPieceLabel | lower, pluralIndexLabel | lower ) }}</p>
{% endblock %}

{% block formBody %}

{# One of the fieldsets will have apos-active at any given time #}
{# The reset will be hidden #}
<fieldset data-sources class="apos-fieldset apos-fieldset-inset-controller apos-fieldset-select apos-fieldset-selectize">
  <label class="apos-by-label apos-wide-label">{{ __('Add') }} {{ pluralPieceLabel }} {{ __('By') }}</label>
    <div class="apos-select-wrapper apos-inline-input">
      <select class="apos-by" name="by" data-selectize>
        <option value="fromPageIds">{{ indexLabel }} {{ __('Name') }}</option>
        <option value="id">{{pieceLabel}} {{ __('Title') }}</option>
        <option value="tag">{{pieceLabel}} {{ __('Tag(s)') }}</option>
      </select>
    </div>
</fieldset>

<fieldset class="apos-fieldset apos-fieldset-text apos-fieldset-inset apos-fieldset-selective apos-fieldset-by apos-fieldset-no-margin" data-by="fromPageIds">
  <div class="apos-fieldset-inset-inner">
    <label class="apos-wide-label">{{ __('By ' + indexLabel + ' name') }}</label>
    {{ formSelective('fromPageIds',
      pluralIndexLabel, {
        inline: true,
        placeholder: __('Type ' + indexLabel + ' names here'), extras: [
          {
            name: 'tags',
            label: 'With these tags (optional)',
            type: 'tags'
          }
        ]
      })
    }}
    <p class="apos-help">{{ __('If you do not specify at least one ' +  indexLabel + ', ' + pluralPieceLabel + ' from all ' + pluralIndexLabel + ' are shown.') }}</p>
  </div>
  <div class="apos-fieldset-inset-inner">
    <label class="apos-wide-label">{{ __('Max ' + pluralPieceLabel + ' Shown') }}:</label>
    <input type="text" name="limitFromPageIds" class="apos-input-narrow"/>
  </div>
</fieldset>

<fieldset class="apos-fieldset apos-fieldset-text apos-fieldset-inset apos-fieldset-by apos-fieldset-no-margin" data-by="id">
  <label class="apos-wide-label">{{ __('By ' + pieceLabel + ' title') }}</label>
  {{ formSelective('ids', __('Title'), { inline: true, placeholder: __('Type ' + pieceLabel + ' titles here') }) }}
</fieldset>

<fieldset class="apos-fieldset apos-fieldset-tags apos-fieldset-inset apos-fieldset-text apos-fieldset-by apos-fieldset-no-margin" data-by="tag">
  <div class="apos-fieldset-inset-inner">
    <label class="apos-wide-label">{{ __('By tag') }}</label>
    {{ formTags('tags', 'Tags', { inline: true }) }}
  </div>
  <div class="apos-fieldset-inset-inner">
    <label class="apos-wide-label">{{ __('Max ' + pluralPieceLabel + ' Shown') }}:</label>
    <input type="text" name="limitByTag" class="apos-input-narrow" />
  </div>
</fieldset>

{% endblock %}