{{-- Tarjeta de fermento (espejo del /fermentos web). Requiere en el scope de
     Alpine la variable `f` (item de GET /v1/catalogue) y el método difficulty().
     Nota: background-image va con :style OBJETO — el binding string de Alpine
     reemplaza el atributo style estático y por eso no se veían las fotos. --}}
<a :href="f.recipe ? '/recetas/' + f.recipe.slug : '#'" @click="!f.recipe && $event.preventDefault()"
   class="fm-card fm-card--flush fm-card--tap" style="text-decoration:none;position:relative;display:block;">
    <div style="height:130px;background:var(--green-050);background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center;"
         :style="f.image ? { backgroundImage: 'url(' + JSON.stringify(f.image) + ')' } : {}">
        <span x-show="!f.image" style="font-family:var(--font-display);font-weight:700;font-size:44px;color:var(--green-300);" x-text="(f.name||'?')[0].toUpperCase()"></span>
        <template x-if="f.plan_required === 'premium'">
            <span class="fm-badge fm-badge--gold" style="position:absolute;top:10px;right:10px;"><i class="fa-solid fa-lock" style="font-size:10px;"></i> Premium</span>
        </template>
        <template x-if="f.category">
            <span style="position:absolute;left:0;bottom:0;right:0;height:3px;" :style="{ background: f.category.color }"></span>
        </template>
    </div>

    <div style="padding:14px 16px;">
        <div class="fm-title" style="font-size:17px;" x-text="f.name"></div>
        <div class="fm-muted" style="font-size:13px;line-height:1.45;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;" x-text="f.description"></div>

        <div style="display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap;">
            <span class="fm-data" style="font-size:12.5px;color:var(--text-secondary);"><i class="fa-regular fa-clock" style="margin-right:4px;"></i><span x-text="f.duration_days + ' días'"></span></span>
            <span class="fm-badge fm-badge--neutral" x-text="difficulty(f.difficulty_level)"></span>
            <template x-if="f.category"><span class="fm-badge" :style="{ color: f.category.color, background: 'color-mix(in srgb, ' + f.category.color + ' 11%, var(--paper-0))' }" x-text="f.category.name"></span></template>
        </div>

        <div style="margin-top:12px;">
            <template x-if="f.recipe && f.plan_required !== 'premium'">
                <span class="fm-btn fm-btn--green fm-btn--block" style="padding:11px;">Ver receta</span>
            </template>
            <template x-if="f.recipe && f.plan_required === 'premium'">
                <span class="fm-btn fm-btn--gold fm-btn--block" style="padding:11px;">Disponible con Premium</span>
            </template>
            <template x-if="!f.recipe">
                <span class="fm-btn fm-btn--soft fm-btn--block" style="padding:11px;color:var(--text-muted);">Receta en preparación</span>
            </template>
        </div>
    </div>
</a>