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

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

{% block modalLabel %}
  {{ __('Display People') }}
{% endblock %}

{% block modalInstructions %}
<p>{{ __('Start typing the name of a person, then click on the suggestions that appear to insert them.
Or just use tags to pull in people.') }}</p>
{% endblock %}

{% block formBody %}

<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="id">{{pieceLabel}} {{ __('Name') }}</option>
        <option value="tag">{{pieceLabel}} {{ __('Tag(s)') }}</option>
      </select>
    </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 Name') }}</label>
  {{ formSelective('ids', __('Title'), { inline: true, placeholder: __('Type a name 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 People Shown') }}:</label>
    <input type="text" name="limitByTag" class="apos-input-narrow" />
  </div>
</fieldset>


{% endblock %}