{# @var craft \craft\web\twig\variables\CraftVariable #}
{#
/**
 * HOMM Icons plugin for Craft CMS 3.x
 *
 * HOMMIconsField Field Input
 *
 * @author    Domenik Hofer
 * @copyright Copyright (c) 2019 Domenik Hofer
 * @link      https://github.com/HOMMinteractive
 * @package   HOMMIcons
 * @since     1.0.0
 */
#}

<input type="hidden" name="{{ name }}[icon]" class="iconpicker-icon" value="{{ value }}">
<p class="iconpicker-msg homm-iconpicker{% if value == '' %}--empty{% endif %}">
    <span class="homm-iconpicker">
        <span class="iconpicker-preview">
           {% for icon in icons %}
               {% if icon.getFilename(false) == value %}
                   {% set iconSvg = icon.getUrl()|slice(1) %}
                   {{ svg(iconSvg) }}
               {% endif %}
           {% endfor %}
        </span>
    </span>
    <span class="iconpicker-code">
	    {{ value }}
    </span>
</p>
<button class="iconpickerField_modaltoggle btn" type="button">{{ 'Choose icon'|t('hommicons') }}</button>
<button class="iconpickerField_removeicon btn" type="button">{{ 'Remove icon'|t('hommicons') }}</button>

<div class="modal iconpickerField_modal elementselectormodal" style="display: none" id="{{ name }}_modal">
    <div class="body">
        <div class="content">
            <div class="main">
                <div class="homm-iconpicker">
                    {% for icon in icons %}
                        {% if icon.folder == 'icons' %}

                            {% set iconSvg = icon.getUrl()|slice(1) %}
                            <span data-val="{{ icon.getFilename(false) }}"
                                  class="{{ value == icon.getFilename(false) ? 'iconpicker--selected' }}"
                                  title="{{ icon.getFilename(false) }}"
                            >
                                {{ svg(iconSvg) }}
                                <label><small>{{ icon.getFilename(false) }}</small></label>
                            </span>
                        {% endif %}
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="iconpickerField_modal_preview"></div>
        <div class="buttons right">
            <div class="btn iconpickerField_modal_close" tabindex="0">{{ 'Close'|t('hommicons') }}</div>
            <div class="btn disabled submit iconpickerField_modal_select">{{ 'Choose icon'|t('hommicons') }}</div>
        </div>
    </div>
    <div class="resizehandle"></div>
</div>