{% from 'include/input_macros.html' import copy_to_clipboard %}

{%- macro generate_opt_options(id, provider, param_section, params, name='', required='', first='', class='', selected='', disabled='true', optgroup=true) -%}
	{% if name == '' %}
		{% set name = id %}
	{% endif %}
	{% if disabled == 'true' %}
		{% set disabled = 'disabled' %}
	{% else %}
		{% set disabled = '' %}
	{% endif %}
    {% set section = namespace(section='') %}
    <select id="{{id}}" name="{{name}}" {{required}}>
    {% for p in params %}
        {% if (p.provider == provider and p.section == param_section) or (provider == 'all' and p.section == param_section) %}
            {% if optgroup %}
                {% if section.section|string() != p.optgroup|string() %}
                    <optgroup label="{{p.optgroup}}">
                {% endif %}
            {% endif %}
            {% set section.section = p.optgroup %}
            {% if first == value %}
                <option value="{{p.param}}" selected data-class="avatar" data-style="background-image: url(&apos;{{p.image}}&apos;)">{{p.name}}</option>
            {% else %}
                <option value="{{p.param}}" data-class="avatar" data-style="background-image: url(&apos;{{p.image}}&apos;)">{{p.name}}</option>
            {% endif %}
        {% endif %}
    {% endfor %}
    </select>
    <script>
        $( function() {
            $('#{{id}}').selectmenu('destroy');
            $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
                _renderItem: function( ul, item ) {
                    var li = $( "<li>" ),
                    wrapper = $( "<div>", { text: item.label } );

                    if ( item.disabled ) {
                        li.addClass( "ui-state-disabled" );
                    }
                    $( "<span>", {
                        style: item.element.attr( "data-style" ),
                        "class": "ui-icon " + item.element.attr( "data-class" )
                    }).appendTo( wrapper );

                    return li.append( wrapper ).appendTo( ul );
                }
            });
            $( "#{{id}}" )
                .iconselectmenu()
                .iconselectmenu( "menuWidget")
                .addClass( "ui-menu-icons avatar" );
        } );
  </script>
  <style>
      /* select with custom icons */
      .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
          padding: 0.5em 0 0.5em 3em;
      }
      /* select with CSS avatar icons */
      option.avatar {
          background-repeat: no-repeat !important;
          padding-left: 20px;
      }
      .avatar .ui-icon {
          background-position: left top;
          height: 15px;
          width: 23px;
          top: -0.1em;
      }
  </style>
{%- endmacro %}

{%- macro get_nice_name(id, value, provider, section, params) -%}
    {% for p in params %}
        {% if p.section == section and p.provider == provider and p.param == value %}
            <span style="background-image: url('{{p.image}}')" class="avatar ui-icon"></span>
            {{ copy_to_clipboard(id=id, value=p.param, show=p.name) }}
        {% endif %}
    {% endfor %}
    <style>
      /* select with custom icons */
      .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
          padding: 0.5em 0 0.5em 3em;
      }
      /* select with CSS avatar icons */
      option.avatar {
          background-repeat: no-repeat !important;
          padding-left: 20px;
      }
      .avatar .ui-icon {
          background-position: left top;
          height: 15px;
          width: 23px;
          top: -0.1em;
      }
  </style>
{%- endmacro %}