<!-- Icon picker modal — choose a custom icon for a card.

     Wired by static/js/features/icon-picker.ts. Markup is intentionally
     minimal; the dynamic content (preview, tabs, recent, grid) is rendered
     by the TS module on every state change. -->
<div id="icon-picker-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="icon-picker-title">
    <div class="modal-content icon-picker">
        <div class="modal-header icon-picker-head">
            <div class="icon-picker-preview-wrap">
                <div id="icon-picker-preview" class="mod-icon icon-picker-preview" aria-hidden="true"></div>
            </div>
            <div class="icon-picker-meta">
                <div id="icon-picker-eyebrow" class="icon-picker-eyebrow">Card icon</div>
                <h2 id="icon-picker-title" class="icon-picker-title">
                    <strong id="icon-picker-device-name">—</strong>
                </h2>
                <div id="icon-picker-sub" class="icon-picker-sub"></div>
            </div>
            <button class="modal-close-btn icon-picker-close" type="button" data-i18n-aria-label="aria.close" aria-label="Close">&#x2715;</button>
        </div>

        <div class="modal-body icon-picker-body">
            <div class="icon-picker-toolbar">
                <label class="icon-picker-search-wrap">
                    <svg class="icon-picker-search-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    <input id="icon-picker-search" type="text" autocomplete="off"
                           data-i18n-placeholder="device.icon.search.placeholder"
                           placeholder="Search icons…">
                </label>
                <button id="icon-picker-color-toggle" type="button" class="icon-picker-color-toggle">
                    <span id="icon-picker-swatch" class="icon-picker-swatch" aria-hidden="true"></span>
                    <span data-i18n="device.icon.color_toggle">Color</span>
                </button>
            </div>

            <div id="icon-picker-tabs" class="icon-picker-tabs" role="tablist"></div>

            <div id="icon-picker-recent" class="icon-picker-recent" style="display:none">
                <span class="icon-picker-recent__label" data-i18n="device.icon.recent">Recent</span>
                <div class="icon-picker-recent__strip"></div>
            </div>

            <div id="icon-picker-grid" class="icon-picker-grid-wrap"></div>
        </div>

        <div class="modal-footer icon-picker-foot">
            <div class="icon-picker-hint" data-i18n="device.icon.hint">↵ Apply &nbsp;·&nbsp; Esc Cancel</div>
            <button id="icon-picker-remove" type="button" class="btn btn-secondary icon-picker-btn-remove" data-i18n="device.icon.remove">Remove icon</button>
            <button id="icon-picker-cancel" type="button" class="btn btn-secondary" data-i18n="common.cancel">Cancel</button>
            <button id="icon-picker-apply" type="button" class="btn btn-primary" data-i18n="common.apply">Apply</button>
        </div>
    </div>
</div>
