michaelschiemer/src/Framework/View/templates/admin-asset-variants.view.php

<div class="admin-asset-variants">
    <!-- Error Display -->
    <div class="admin-alert admin-alert--error" if="{{error_message}}">
        <strong>Error:</strong> {{error_message}}
    </div>

    <!-- Header -->
    <div class="admin-asset-variants__header">
        <h2 class="admin-asset-variants__title">Variants</h2>
        <div class="admin-asset-variants__actions">
            <if condition="is_image">
            <button 
                type="button"
                class="admin-btn admin-btn--primary admin-btn--sm"
                data-live-action="generateVariants"
                {{is_generating ? 'disabled' : ''}}
            >
                <if condition="is_generating">
                <i class="icon-loading"></i> Generating...
                </if>
                <if condition="!is_generating">
                <i class="icon-plus"></i> Generate Variants
                </if>
            </button>
            </if>
            <button 
                type="button"
                class="admin-btn admin-btn--secondary admin-btn--sm"
                data-live-action="refresh"
            >
                <i class="icon-refresh"></i> Refresh
            </button>
        </div>
    </div>

    <!-- Variants Grid -->
    <if condition="has_variants">
    <div class="admin-asset-variants__grid">
        <for items="variants" as="variant">
        <div class="admin-variant-card">
            <div class="admin-variant-card__preview">
                <if condition="variant.mime | str_starts_with('image/')">
                <img 
                    src="{{variant.url}}" 
                    alt="{{variant.variant}}" 
                    class="admin-variant-card__thumbnail"
                    loading="lazy"
                >
                </if>
                <if condition="!variant.mime | str_starts_with('image/')">
                <div class="admin-variant-card__icon">
                    <span class="admin-variant-card__icon-text">{{variant.mime | substr(0, 1) | upper}}</span>
                </div>
                </if>
            </div>
            
            <div class="admin-variant-card__info">
                <div class="admin-variant-card__name">{{variant.variant}}</div>
                <div class="admin-variant-card__meta">
                    <if condition="variant.width && variant.height">
                    <span class="admin-variant-card__dimensions">
                        {{variant.width}} × {{variant.height}}
                    </span>
                    </if>
                    <span class="admin-variant-card__size">{{variant.bytes | format_filesize}}</span>
                    <span class="admin-variant-card__format">{{variant.mime}}</span>
                </div>
            </div>
            
            <div class="admin-variant-card__actions">
                <a 
                    href="{{variant.url}}" 
                    target="_blank"
                    class="admin-btn admin-btn--secondary admin-btn--sm"
                    title="Open in new tab"
                >
                    <i class="icon-external"></i>
                </a>
                <button 
                    type="button"
                    class="admin-btn admin-btn--danger admin-btn--sm"
                    data-live-action="deleteVariant"
                    data-param-variant-name="{{variant.variant}}"
                    title="Delete variant"
                >
                    <i class="icon-trash"></i>
                </button>
            </div>
        </div>
        </for>
    </div>
    </if>

    <!-- Empty State -->
    <if condition="!has_variants">
    <div class="admin-asset-variants__empty">
        <div class="admin-asset-variants__empty-icon">📦</div>
        <p class="admin-asset-variants__empty-text">No variants created yet.</p>
        <if condition="is_image">
        <button 
            type="button"
            class="admin-btn admin-btn--primary"
            data-live-action="generateVariants"
        >
            <i class="icon-plus"></i> Generate Variants
        </button>
        </if>
        <if condition="!is_image">
        <p class="admin-asset-variants__empty-hint">
            Variants can only be generated for images.
        </p>
        </if>
    </div>
    </if>
</div>