{{ attach_library('ui_patterns/form-form.form_lib') }}
{{ attach_library('ui_patterns/libraries.bs_forms') }}
{{ attach_library('ui_patterns/libraries.bs_buttons') }}
{{ attach_library('ui_patterns/icheck.icheck_lib') }}
{{ attach_library('ui_patterns/jqautocomplete.jqautocomplete_lib') }}

<h2>Form group examples</h2>

<p>
  Here are some different configurations for form groups and inputs.
</p>

{% set label %}
  {{ pattern_preview('form-label', {'title': 'This is the label'}) }}
{% endset %}

<p>
  Using <code>label_display=inline</code> we can create column based forms<br>
  These have a fixed <code>col-md-3</code> on the label and <code>col-md-9</code> on the input.
  Therefore they are responsive but the label can get squashed.
</p>

<div class="col-md-6">
  {{ pattern('form-element', {
    'label': label,
    'label_display': 'inline',
    'children': pattern_preview('form-input', {}, 'textfield'),
    'type': 'textfield',
  }, 'textfield') }}
</div>
<div class="col-md-6">
  {{ pattern('form-element', {
    'label': label,
    'label_display': 'inline',
    'children': pattern_preview('form-select', {}),
    'type': 'select',
  }, 'select') }}
</div>

<hr>

<p>Standard from elements in rows</p>

<div class="row">
  <div class="col-md-6">
    {{ pattern('form-element', {
      'label': label,
      'children': pattern_preview('form-input', {}, 'textfield'),
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>
  <div class="col-md-6">
    {{ pattern('form-element', {
      'label': label,
      'children': pattern_preview('form-select', {}),
      'errors': '',
      'description_content': '',
      'type': 'select',
    }, 'select') }}
  </div>
</div>

<hr>

<p>
  Standard from elements in rows with <code>form-group-inline</code><br>
  In this case, the class makes the element flex, so the label and input are in line,
  and are dynamic. Good for flexible single row forms like filters, but won't provided consistent
  form styles because labels vary in size.
</p>

<div class="row">
  <div class="col-md-6">
    {{ pattern('form-element', {
      'label': label,
      'children': pattern_preview('form-input', {}, 'textfield'),
      'errors': '',
      'description_content': '',
      'type': 'textfield',
      'classes': 'form-group-inline',
    }, 'textfield') }}
  </div>
  <div class="col-md-6">
    {{ pattern('form-element', {
      'label': label,
      'children': pattern_preview('form-select', {}),
      'errors': '',
      'description_content': '',
      'type': 'select',
      'classes': 'form-group-inline',
    }, 'select') }}
  </div>
</div>

<hr>

<h3>Form group disabled</h3>


<div class="row">

  <div class="col-md-3">
    {{ pattern('form-element', {
      'label': label,
      'children': pattern_preview('form-input', {}, 'textfield'),
      'errors': '',
      'description_content': '',
      'type': 'textfield',
      'classes': 'form-group-inline',
    }, 'textfield') }}
  </div>

  <div class="col-md-3">
    {{ pattern('form-element', {
      'label': label,
      'children': pattern_preview('form-input', {}, 'textfield'),
      'errors': '',
      'description_content': '',
      'type': 'textfield',
      'classes': 'form-group-inline',
    }, 'textfield') }}
  </div>
</div>

{% set dis_attrs = create_attribute().setAttribute('disabled', 'disabled') %}
<div class="row">

<div class="col-md-3">
  {{ pattern('form-element', {
    'prefix': 'label',
    'suffix': '<button disabled="disabled"><i class="fas fa-search"></i></button>',
    'label': pattern('form-label', {'title': 'Disbaled form group with addons'}),
    'children': pattern_preview('form-input', {'attributes': dis_attrs}, 'textfield'),
    'classes': 'form-group-disabled',
    'errors': '',
    'description_content': '',
    'type': 'textfield',
  }, 'textfield') }}
</div>

<div class="col-md-3">
  {{ pattern('form-element', {
    'label': label,
    'children': pattern_preview('form-input', {}, 'textfield'),
    'errors': '',
    'description_content': '',
    'type': 'textfield',
  }, 'textfield') }}
</div>
</div>
<hr>

<h2>Vendor form input examples</h2>

<p>
  These vendor inputs should follow the site-wide and branded styling as closely as possible.
  None of the 3rd party libraies CSS are used. The all come from our form styles or custom libraries.
</p>

<h3>jQuery Chosen</h3>

<div class="col-md-3 chosen-select-group">
  {{ pattern_preview('form-select', {}) }}
</div>

<hr>

<h3>iCheck</h3>

<div class="col-md-3 icheck-group">
  <div class="form-group-inline">
    {% set attributes = create_attribute().setAttribute('name', 'demo-rd') %}
    {{ pattern_preview('form-input', {'attributes': attributes}, 'radio') }}
    {% set attributes_a = create_attribute().setAttribute('name', 'demo-rd') %}
    {% set attributes_a = attributes_a.setAttribute('checked', 'checked') %}
    {{ pattern_preview('form-input', {'attributes': attributes_a}, 'radio') }}
    {% set attributes_b = create_attribute().setAttribute('name', 'demo-rd') %}
    {% set attributes_b = attributes_b.setAttribute('disabled', 'disabled') %}
    {{ pattern_preview('form-input', {'attributes': attributes_b}, 'radio') }}
  </div>
</div>

<hr>

<h3>jQuery UI Spinner (custom widget)</h3>

<div class="col-md-3">
  {{ pattern_preview('form-element', {
    'label_display': 'invisible',
    'errors': '',
    'description_content': '',
    'classes': 'customspinner-element',
  }, 'textfield') }}
</div>

<hr>

<h3>jQuery UI Datepicker</h3>

<div class="col-md-3">
  {{ pattern_preview('form-element', {
    'label_display': 'invisible',
    'errors': '',
    'description_content': '',
    'classes': 'datepicker-element'
  }, 'textfield') }}
</div>

<hr>

<div class="col-md-6">
  <div id="datepicker-example"></div>
</div>

<hr>

<p>JQurey Ui Autocomplete</p>

<div class="row">
  <div class="col-md-6">
    {{ pattern_preview('form-element', {
      'label': 'JQuery UI Autocomplete text input',
      'classes': 'jqac-input-element',
      'errors': '',
      'description_content': '',
    }, 'textfield') }}
  </div>
  <div class="col-md-6">
    {{ pattern('form-element', {
      'label': 'Normal form select',
      'children': pattern_preview('form-select', {}),
      'errors': '',
      'description_content': '',
      'type': 'select',
    }, 'select') }}
  </div>
</div>

<hr>

<p>Selects - Various types</p>

<div class="row">

  <div class="col-md-3">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Normal select'}),
      'children': pattern_preview('form-select', {}),
      'errors': '',
      'description_content': '',
      'type': 'select',
    }, 'select') }}
  </div>
  <div class="col-md-3">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Autocomplete - Standard'}),
      'children': pattern_preview('form-input', {}, 'textfield'),
      'classes': 'jqac-input-element',
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>
  <div class="col-md-3 stations-autocomplete">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Autocomplete - Stations'}),
      'children': pattern_preview('form-input', {}, 'textfield'),
      'classes': 'jqac-input-element',
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>

  <div class="col-md-3 chosen-select-group">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Chosen'}),
      'children': pattern_preview('form-select', {}),
      'classes': '',
      'errors': '',
      'description_content': '',
      'type': 'select',
    }, 'select') }}
  </div>

</div>

<hr>
<div class="row">

  <div class="col-md-4">
    <h2>LG Input & LG Button</h2>
    <div class="form-group-inline form-group-no-pad">
      {{ pattern('form-element', {
        'label': pattern('form-label', {'title': 'Autocomplete - Standard'}),
        'label_display': 'invisible',
        'children': pattern_preview('form-input', {'size': 'lg'}, 'textfield'),
        'classes': 'me-2',
        'errors': '',
        'description_content': '',
        'type': 'textfield',
      }, 'textfield') }}
      {{ pattern_preview('form-submit', {
        'size': 'lg',
        'text': 'Search',
        'status': 'default',
        'outline': true,
      }) }}
    </div>
  </div>

  <div class="col-md-4">
    <h2>MD Input & MD Button</h2>
    <div class="form-group-inline form-group-no-pad">
      {{ pattern('form-element', {
        'label': pattern('form-label', {'title': 'Autocomplete - Standard'}),
        'label_display': 'invisible',
        'children': pattern_preview('form-input', {'size': 'md'}, 'textfield'),
        'classes': 'me-2',
        'errors': '',
        'description_content': '',
        'type': 'textfield',
      }, 'textfield') }}
      {{ pattern_preview('form-submit', {
        'size': 'md',
        'text': 'Search',
        'status': 'default',
      }) }}
    </div>
  </div>

  <div class="col-md-4">
    <h2>SM Input & SM Button</h2>
    <div class="form-group-inline form-group-no-pad">
      {{ pattern('form-element', {
        'label': pattern('form-label', {'title': 'Autocomplete - Standard'}),
        'label_display': 'invisible',
        'children': pattern_preview('form-input', {'size': 'sm'}, 'textfield'),
        'classes': 'me-2',
        'errors': '',
        'description_content': '',
        'type': 'textfield',
      }, 'textfield') }}
      {{ pattern_preview('form-submit', {
        'size': 'sm',
        'text': 'Search',
        'status': 'default',
      }) }}
    </div>
  </div>

</div>

<br>

<div class="row">

  <div class="col-md-4">
    <h2>LG Input & LG Button</h2>
    <div class="form-group-inline form-group-no-pad">
      {{ pattern('form-element', {
        'label': pattern('form-label', {'title': 'Autocomplete - Standard'}),
        'label_display': 'invisible',
        'children': pattern_preview('form-input', {'size': 'lg'}, 'textfield'),
        'classes': 'me-2',
        'errors': '',
        'description_content': '',
        'type': 'textfield',
      }, 'textfield') }}
      {{ pattern_preview('form-submit', {
        'size': 'lg',
        'text': 'Search',
        'status': 'default',
      }) }}
    </div>
  </div>
  <div class="col-md-4">
    <h2>MD Input & SM Button</h2>
    <div class="form-group-inline form-group-no-pad">
      {{ pattern('form-element', {
        'label': pattern('form-label', {'title': 'Autocomplete - Standard'}),
        'label_display': 'invisible',
        'children': pattern_preview('form-input', {'size': 'md'}, 'textfield'),
        'classes': 'me-2',
        'errors': '',
        'description_content': '',
        'type': 'textfield',
      }, 'textfield') }}
      {{ pattern_preview('form-submit', {
        'size': 'sm',
        'text': 'Search',
        'status': 'default',
      }) }}
    </div>
  </div>

</div>

<br><hr>

<div class="row">
  <h2>Input sizes</h2>
  <div class="col-md-4">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Standard'}),
      'label_display': 'invisible',
      'children': pattern_preview('form-input', {'size': 'sm'}, 'textfield'),
      'classes': 'me-2',
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Standard'}),
      'label_display': 'invisible',
      'children': pattern_preview('form-input', {'size': 'md'}, 'textfield'),
      'classes': 'me-2',
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Standard'}),
      'label_display': 'invisible',
      'children': pattern_preview('form-input', {'size': 'lg'}, 'textfield'),
      'classes': 'me-2',
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>
  <div class="col-md-4">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Standard'}),
      'label_display': 'invisible',
      'children': pattern_preview('form-input', {'size': 'md'}, 'textfield'),
      'classes': 'me-2',
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>
  <div class="col-md-4">
    {{ pattern('form-element', {
      'label': pattern('form-label', {'title': 'Standard'}),
      'label_display': 'invisible',
      'children': pattern_preview('form-input', {'size': 'sm'}, 'textfield'),
      'classes': 'me-2',
      'errors': '',
      'description_content': '',
      'type': 'textfield',
    }, 'textfield') }}
  </div>
</div>

<br><hr>

<div class="row">
  <h2>Button sizes</h2>
  <div class="col-md-2">
    {{ pattern_preview('form-submit', {
      'size': 'sm',
      'text': 'Search',
      'status': 'default',
    }) }}
  </div>
</div>
<div class="row">
  <div class="col-md-2">
    {{ pattern_preview('form-submit', {
      'size': 'md',
      'text': 'Search',
      'status': 'default',
    }) }}
  </div>
</div>
<div class="row">
  <div class="col-md-2">
    {{ pattern_preview('form-submit', {
      'size': 'lg',
      'text': 'Search',
      'status': 'default',
    }) }}
  </div>
  <div class="col-md-2">
    {{ pattern_preview('form-submit', {
      'size': 'md',
      'text': 'Search',
      'status': 'default',
    }) }}
  </div>
  <div class="col-md-2">
    {{ pattern_preview('form-submit', {
      'size': 'sm',
      'text': 'Search',
      'status': 'default',
    }) }}
  </div>
</div>


<br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br>
