<div class="augur-nexus site-icon-picker npc-portrait-picker shop-icon-picker">
    <div class="site-icon-picker-header"><div class="site-icon-picker-role">Showing {{pickerLabel}} Shop Icons</div></div>
    <div class="site-icon-tabs" role="tablist" aria-label="Shop Icon Source">
        <button type="button" class="site-icon-tab {{#if (eq currentTab "built-in")}}active{{/if}}" data-action="selectSource" data-source="built-in">Built-In</button>
        <button type="button" class="site-icon-tab {{#if (eq currentTab "custom")}}active{{/if}}" data-action="selectSource" data-source="custom">Custom</button>
    </div>
    <div class="site-icon-picker-body">
        {{#if (eq currentTab "built-in")}}
        <div class="site-icon-grid npc-portrait-grid shop-icon-grid">
            {{#if defaultIcon}}
            <button type="button" class="site-icon-card npc-portrait-card shop-icon-card {{#if (eq defaultIcon.imageSrc currentImageSrc)}}active{{/if}}" data-action="selectIcon" data-icon-id="{{defaultIcon.id}}" data-icon-src="{{defaultIcon.imageSrc}}" data-icon-mode="preset">
                <div class="site-icon-visual npc-portrait-visual"><img src="{{defaultIcon.imageSrc}}" alt=""></div>
                <div class="site-icon-name">Shop Type Default</div><div class="site-icon-meta">{{defaultIcon.label}}</div>
            </button>
            {{/if}}
            <button type="button" class="site-icon-card site-icon-card-custom-file npc-portrait-card" data-action="chooseFile">
                <div class="site-icon-visual npc-portrait-visual site-icon-custom-file-visual"><i class="fas fa-file-image"></i></div>
                <div class="site-icon-name">Custom Icon</div><div class="site-icon-meta">Choose File</div>
            </button>
            {{#each icons}}
            <button type="button" class="site-icon-card npc-portrait-card shop-icon-card {{#if (eq imageSrc ../currentImageSrc)}}active{{/if}}" data-action="selectIcon" data-icon-id="{{id}}" data-icon-src="{{imageSrc}}" data-icon-mode="catalog" aria-label="{{label}}">
                <div class="site-icon-visual npc-portrait-visual"><img src="{{imageSrc}}" alt="{{label}}"></div>
                <div class="site-icon-name">{{label}}</div>
            </button>
            {{/each}}
        </div>
        {{#unless icons.length}}<div class="site-icon-empty">No built-in shop icon catalogs have been registered.</div>{{/unless}}
        {{else}}
        <div class="site-icon-custom-toolbar">
            <button type="button" class="site-entry-clear" data-action="chooseFolder" title="Choose custom shop image folder"><i class="fas fa-folder-open"></i></button>
            <div class="site-icon-custom-folder" title="{{currentCustomFolderPathLabel}}">{{#if hasCustomFolder}}{{currentCustomFolderPathLabel}}{{else}}No custom shop image folder selected{{/if}}</div>
            {{#if customFolderCanGoUp}}<button type="button" class="site-entry-clear" data-action="folderUp" data-folder-path="{{customFolderParentPath}}" title="Up one folder"><i class="fas fa-arrow-up"></i></button>{{/if}}
            {{#if hasCustomFolder}}<button type="button" class="site-entry-clear" data-action="clearFolder" title="Clear custom shop image folder"><i class="fas fa-xmark"></i></button>{{/if}}
        </div>
        <div class="site-icon-grid npc-portrait-grid shop-icon-grid">
            {{#each customFolders}}<button type="button" class="site-icon-card site-icon-card-folder npc-portrait-card" data-action="openFolder" data-folder-path="{{path}}"><div class="site-icon-visual npc-portrait-visual site-icon-folder-visual"><i class="fas fa-folder"></i></div><div class="site-icon-name">{{label}}</div></button>{{/each}}
            <button type="button" class="site-icon-card site-icon-card-custom-file npc-portrait-card" data-action="chooseFile"><div class="site-icon-visual npc-portrait-visual site-icon-custom-file-visual"><i class="fas fa-file-image"></i></div><div class="site-icon-name">Choose File</div><div class="site-icon-meta">Single Image</div></button>
            {{#each customIcons}}<button type="button" class="site-icon-card npc-portrait-card shop-icon-card {{#if (eq imageSrc ../currentImageSrc)}}active{{/if}}" data-action="selectIcon" data-icon-id="custom" data-icon-src="{{imageSrc}}" data-icon-mode="custom"><div class="site-icon-visual npc-portrait-visual"><img src="{{imageSrc}}" alt="{{label}}"></div><div class="site-icon-name">{{label}}</div></button>{{/each}}
        </div>
        {{#unless customIcons.length}}<div class="site-icon-empty">{{#if hasCustomFolder}}{{#if customFolders.length}}Choose a folder or pick a single image.{{else}}No image files were found in the selected folder.{{/if}}{{else}}Choose a folder to show your custom shop image library here, or pick a single image.{{/if}}</div>{{/unless}}
        {{/if}}
    </div>
</div>
