{% if preventInput is defined %}
{% else %}
<div class="input-group">
  <input data-placement="bottomRight" class="form-control gogo-icon-picker icp icp-auto" value="{{ form.vars.value }}"
       type="text" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" />
  <span class="input-group-addon"></span>
</div>
{% endif %}

<link rel="stylesheet" href="{{ asset('fonts/fontawesome-5/css/all.min.css') }}" />
<script src="{{ asset('js/fontawesome-iconpicker.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/fontawesome-iconpicker.css') }}" />

<script>
  jQuery(document).ready(function() {
  if ($('.iconpicker-popover').length == 0) {
    var options = {
      title: false, // Popover title (optional) only if specified in the template
      selected: false, // use this value as the current item and ignore the original
      defaultValue: false, // use this value as the current item if input or element value is empty
      placement: 'right', // (has some issues with auto and CSS). auto, top, bottom, left, right
      collision: true, // If true, the popover will be repositioned to another position when collapses with the window borders
      animation: true, // fade in/out on show/hide ?
      //hide iconpicker automatically when a value is picked. it is ignored if mustAccept is not false and the accept button is visible
      hideOnSelect: false,
      showFooter: true,
      searchInFooter: true, // If true, the search will be added to the footer instead of the title
      mustAccept: false, // only applicable when there's an iconpicker-btn-accept button in the popover footer
      selectedCustomClass: 'bg-primary', // Appends this class when to the selected item
      // icons: [], // list of icon objects [{title:String, searchTerms:String}]. By default, all Font Awesome icons are included.
      fullClassFormatter: function(val) {
        return val;
      },
      input: 'input,.iconpicker-input', // children input selector
      inputSearch: false, // use the input as a search box too?
      container: false, //  Appends the popover to a specific element. If not set, the selected element or element parent is used
      component: '.input-group-addon,.iconpicker-component', // children component jQuery selector or object, relative to the container element
      // Plugin templates:
      templates: {
        popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
          '<div class="popover-title"></div><div class="popover-content"></div></div>',
        footer: '<div class="popover-footer"></div>',
        buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">{{ 'action.cancel'|trans }}</button>' +
          ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">{{ 'action.ok'|trans }}</button>',
        search: '<input type="search" class="form-control iconpicker-search" placeholder="{{ 'action.search'|trans }}" />',
        iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
        iconpickerItem: '<a role="button" class="iconpicker-item"><i></i></a>',
      }
    };
    $('.icp-auto').iconpicker(options);

    // Quick dirty fix : In the form buidler and in OptionAdmin, icon field are added dyanmically, so we need to initialize them every 500ms
    setInterval(function() {
      $('.gogo-icon-picker, .fld-icon').iconpicker(options);
    }, 500);
  }
  });
</script>

<style>
  .iconpicker-popover.popover {
    width: 400px;
    /*left: 0 !important;*/
  }
  .iconpicker .iconpicker-item {
    width: 20px;
    height: 20px;
    padding: 8px;
    margin: 0 5px 5px 0;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    font-size: 20px;
  }
</style>