AudioCore/plugins/artists/views/site/index.php

<?php
$pageTitle = $title ?? 'Artists';
$artists = $artists ?? [];

function ac_country_code(string $country): string {
  $code = strtoupper(trim($country));
  if ($code === '') {
    return '';
  }
  if ($code === 'UK') {
    $code = 'GB';
  }
  if (!preg_match('/^[A-Z]{2}$/', $code)) {
    return '';
  }
  return strtolower($code);
}

ob_start();
?>
<section class="card" style="display:grid; gap:18px;">
  <div style="display:flex; align-items:center; justify-content:space-between; gap:16px;">
    <div class="badge">Artists</div>
    <div class="view-toggle" role="group" aria-label="View toggle">
      <button type="button" class="view-btn active" id="artistGridBtn" aria-label="Grid view">
        <i class="fa-duotone fa-grid-round-2"></i>
        <span>Grid</span>
      </button>
      <button type="button" class="view-btn" id="artistListBtn" aria-label="List view">
        <i class="fa-duotone fa-list-ol"></i>
        <span>List</span>
      </button>
    </div>
  </div>

  <?php if (!$artists): ?>
    <div style="color:var(--muted); font-size:14px;">No artists published yet.</div>
  <?php else: ?>
    <div id="artistView" class="artist-grid">
      <?php foreach ($artists as $artist): ?>
        <a class="artist-card" href="/artist?slug=<?= htmlspecialchars((string)$artist['slug'], ENT_QUOTES, 'UTF-8') ?>">
          <div class="artist-avatar">
            <?php if (!empty($artist['avatar_url'])): ?>
              <img src="<?= htmlspecialchars((string)$artist['avatar_url'], ENT_QUOTES, 'UTF-8') ?>" alt="">
            <?php else: ?>
              <div class="artist-avatar-placeholder">AC</div>
            <?php endif; ?>
          </div>
          <div class="artist-info">
            <div class="artist-name">
              <?= htmlspecialchars((string)$artist['name'], ENT_QUOTES, 'UTF-8') ?>
            </div>
            <?php $flag = ac_country_code((string)($artist['country'] ?? '')); ?>
            <?php if ($flag !== ''): ?>
              <div class="artist-meta">
                <span class="fi fi-<?= htmlspecialchars($flag, ENT_QUOTES, 'UTF-8') ?>"></span>
              </div>
            <?php endif; ?>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</section>

<style>
  .artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  .artist-list {
    display: grid;
    gap: 10px;
  }
  .artist-card {
    border-radius: 18px;
    padding: 6px;
    background: transparent;
    display: grid;
    gap: 10px;
    color: inherit;
  }
  .artist-card:hover .artist-avatar {
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    transform: scale(1.02);
  }
  .artist-card .artist-avatar {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .artist-avatar {
    width: 140px;
    height: 140px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    display: grid;
    place-items: center;
  }
  .artist-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .artist-avatar-placeholder {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.2em;
  }
  .artist-info {
    display: none;
    gap: 6px;
  }
  .artist-name {
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .artist-meta {
    font-size: 12px;
    color: var(--muted);
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }
  .view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(10,10,12,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  }
  .view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
  .view-btn i {
    font-size: 12px;
  }
  .view-btn.active {
    background: linear-gradient(135deg, rgba(34,242,165,0.2), rgba(34,167,255,0.12));
    border-color: rgba(34,242,165,0.35);
    color: #f3fff9;
    box-shadow: 0 6px 16px rgba(34,242,165,0.2);
  }
  .view-btn:not(.active):hover {
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.06);
  }
  .flag {
    font-size: 14px;
  }
  .artist-list .artist-card {
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(12,12,14,0.5);
  }
  .artist-list .artist-avatar {
    width: 64px;
    height: 64px;
  }
  .artist-list .artist-info {
    display: grid;
  }
  @media (max-width: 700px) {
    .artist-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .artist-card {
      padding: 4px;
    }
    .artist-avatar {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
    }
    .view-btn span {
      display: none;
    }
    .view-btn {
      width: 34px;
      height: 34px;
      padding: 0;
      justify-content: center;
    }
    .artist-list .artist-card {
      grid-template-columns: 1fr;
      align-items: flex-start;
    }
  }
</style>
<script>
  (function () {
    const gridBtn = document.getElementById('artistGridBtn');
    const listBtn = document.getElementById('artistListBtn');
    const view = document.getElementById('artistView');
    if (!gridBtn || !listBtn || !view) {
      return;
    }
    gridBtn.addEventListener('click', () => {
      view.classList.add('artist-grid');
      view.classList.remove('artist-list');
      gridBtn.classList.add('active');
      listBtn.classList.remove('active');
    });
    listBtn.addEventListener('click', () => {
      view.classList.add('artist-list');
      view.classList.remove('artist-grid');
      listBtn.classList.add('active');
      gridBtn.classList.remove('active');
    });
  })();
</script>
<?php
$content = ob_get_clean();
require __DIR__ . '/../../../../views/site/layout.php';