<?php
 
 
 

$albumTabs = [
    'newest'      => __('sort_newest'),
    'popular'     => __('sort_most_viewed'),
    'most_images' => __('sort_most_images'),
];
$albumTabs = HookSystem::applyFilter('front.album_sort_tabs', $albumTabs);
?>

<div class="section-title-row">
    <h1 class="section-title" style="text-transform:uppercase;">
        <?php echo __('page_title_albums'); ?>
        <?php if ($pagination->total > 0): ?><span style="color:var(--text-muted);font-weight:500;font-size:.7em"><?php echo Format::number($pagination->total); ?></span><?php endif; ?>
    </h1>
    <form class="section-title-row__search" method="GET" action="<?php echo url('/albums'); ?>" role="search">
        <i class="fa-solid fa-magnifying-glass listing-search__icon"></i>
        <input type="text" name="search" id="albumSearchInput" class="listing-search__input" value="<?php echo htmlspecialchars($search ?? ''); ?>" placeholder="<?php echo __('search_albums'); ?>" autocomplete="off">
    </form>
    <?php if (!empty($albums)): ?>
        <?php echo hentaiSortDropdown($sort, '/albums', $albumTabs); ?>
    <?php endif; ?>
</div>

<?php Ads::zone('album_listing_top'); ?>

<?php echo hentaiAlbumBrowseBar(Album::activeType()); ?>

<div class="album-body">
    <?php echo hentaiAlbumSidebar(Album::activeType()); ?>
    <main class="album-main">
        <?php if (!empty($albums)): ?>
        <div class="album-grid<?php echo hentaiAlbumGridClass(); ?>">
            <?php foreach ($albums as $album): ?>
                <?php echo hentaiAlbumCard($album); ?>
                <?php Ads::betweenGrid('album_listing_between', 10); ?>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div class="empty-state">
            <div class="empty-state__icon"><i class="fa-light fa-images"></i></div>
            <p class="empty-state__text"><?php echo __('no_albums'); ?></p>
        </div>
        <?php endif; ?>
        <?php Ads::zone('album_listing_bottom'); ?>
        <?php echo hentaiPagination($pagination); ?>
    </main>
</div>

<?php if (!empty($albums)): ?>
<script>
(function(){
    var inp=document.getElementById('albumSearchInput'); if(!inp)return;
    var grid=document.querySelector('.album-main .album-grid')||document.querySelector('.album-grid'); if(!grid)return;
    inp.addEventListener('input',function(){
        var q=this.value.trim().toLowerCase();
        grid.querySelectorAll('.album-card[data-name]').forEach(function(c){
            c.style.display=(!q||(c.getAttribute('data-name')||'').indexOf(q)!==-1)?'':'none';
        });
    });
})();
</script>
<?php endif; ?>
