<?php
/**
 * Maho
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2006-2020 Magento, Inc. (https://magento.com)
 * @copyright   Copyright (c) 2021-2024 The OpenMage Contributors (https://openmage.org)
 * @copyright   Copyright (c) 2024 Maho (https://mahocommerce.com)
 * @license     https://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/** @var Mage_Catalog_Block_Product_View_Media $this */
?>
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
    <div class="product-image product-image-zoom">
        <div class="product-image-gallery">
            <img id="image-main"
                 class="gallery-image visible"
                 src="<?= $this->helper('catalog/image')->init($_product, 'image') ?>"
                 alt="<?= $this->escapeHtml($this->getImageLabel()) ?>"
                 title="<?= $this->escapeHtml($this->getImageLabel()) ?>" />

            <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
                <?php if ($this->isGalleryImageVisible($_image)): ?>
                    <img id="image-<?= $i ?>"
                         class="gallery-image" loading="lazy"
                         src="<?= $this->getGalleryImageUrl($_image) ?>"
                         data-zoom-image="<?=  $this->getGalleryImageUrl($_image) ?>" />
                <?php endif ?>
                <?php $i++; endforeach; ?>
        </div>
    </div>

<?php if (count($this->getGalleryImages()) > 0): ?>
    <div class="more-views">
        <ul class="product-image-thumbs">
            <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
                <?php if ($this->isGalleryImageVisible($_image)): ?>
                    <li>
                        <a class="thumb-link" href="#" title="<?= $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?= $i ?>">
                            <img src="<?= $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75) ?>"
                                 width="75" height="75" alt="<?= $this->escapeHtml($_image->getLabel()) ?>" />
                        </a>
                    </li>
                <?php endif ?>
                <?php $i++; endforeach; ?>
        </ul>
    </div>
<?php endif ?>

<?= $this->getChildHtml('after') ?>