<?php

declare(strict_types=1);

/**
 * 店家頁 Tab 內「店家照片」面板。
 * 依賴：$storeTabPhotoUrls（list<string>）
 */

$storeTabPhotoUrls = isset($storeTabPhotoUrls) && is_array($storeTabPhotoUrls) ? $storeTabPhotoUrls : [];
$storeTabPhotoCount = count($storeTabPhotoUrls);
if ($storeTabPhotoCount === 0) {
    return;
}
?>
<div class="store-tab-panel__inner store-photos-tab" aria-label="店家照片">
    <div class="store-photos-grid-fate" id="storePhotosGridFate">
        <?php foreach ($storeTabPhotoUrls as $pi => $item): ?>
            <div class="store-photo-tile-fate<?= $pi >= 5 ? ' store-photo-tile-fate--extra' : '' ?>">
                <a href="<?= htmlspecialchars((string) $item['url'], ENT_QUOTES, 'UTF-8') ?>" class="fate-image-lightbox-trigger">
                    <img src="<?= htmlspecialchars((string) $item['url'], ENT_QUOTES, 'UTF-8') ?>"
                         onerror="this.onerror=null; this.src='<?= htmlspecialchars(fate_local_asset_url($item['rel']) ?? '') ?>';"
                         alt="店家照片 <?= (int) $pi + 1 ?>" loading="lazy" decoding="async">
                </a>
            </div>
        <?php endforeach; ?>
    </div>
    <?php if ($storeTabPhotoCount > 5): ?>
        <button type="button" class="store-photos-more-fate" id="storePhotosToggleFate" aria-expanded="false">顯示更多照片</button>
    <?php endif; ?>
</div>
