<?php
require __DIR__ . '/bootstrap.php';
?>
<!doctype html>
<html lang="fi">
<head>
  <meta charset="utf-8">
  <title>Pesisportaali</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/pesisportaali/assets/css/pesisportaali.css?v=2">
</head>
<body>
<div class="pp-shell">
  <aside class="pp-sidebar">
    <div class="pp-logo">Pesis<span>portaali</span></div>
    <div class="pp-subtitle">Seurojen digitaalinen alusta</div>

    <nav class="pp-nav">
      <a class="active" href="#">Yleiskatsaus</a>
      <a href="#">Pelaajat</a>
      <a href="#">Joukkueet</a>
      <a href="#">Ottelut</a>
      <a href="#">Sarjataulukot</a>
      <a href="#">Kummiyritykset</a>
      <a href="#">Teemat</a>
      <a href="#">Komponentit</a>
      <a href="#">Asetukset</a>
    </nav>
  </aside>

  <main class="pp-main">
    <header class="pp-header">
      <div>
        <div class="pp-eyebrow">Pesisportaali v0.2</div>
        <h1 class="pp-title">API-pohjainen pelaajakorttikomponentti.</h1>
        <p class="pp-lead">
          Pelaajakortit latautuvat nyt Pesisportaalin omasta API:sta. Seuraavaksi tähän kytketään oikea
          Pesistulokset-data, pelaajakuvat ja kummiyritykset.
        </p>
      </div>

      <div class="pp-status">
        <strong>Tila: API-demo käytössä</strong>
        <div>Livejärjestelmään ei kosketa.</div>
      </div>
    </header>

    <section class="pp-grid">
      <div class="pp-card">
        <div class="pp-card-icon">P</div>
        <h3>Pelaajat</h3>
        <p>Pelaajakortit, profiilit, kuvat, kummiyritykset ja tilastot.</p>
      </div>
      <div class="pp-card">
        <div class="pp-card-icon">O</div>
        <h3>Ottelut</h3>
        <p>Päivän ottelut, tulevat pelit, tulokset ja ottelukoosteet.</p>
      </div>
      <div class="pp-card">
        <div class="pp-card-icon">T</div>
        <h3>Teemat</h3>
        <p>Jokaiselle seuralle omat värit, logot ja komponenttiasetukset.</p>
      </div>
      <div class="pp-card">
        <div class="pp-card-icon">A</div>
        <h3>API</h3>
        <p>Keskitetty rajapinta verkkosivuille, komponenteille ja myöhemmin liveen.</p>
      </div>
    </section>

    <h2 class="pp-section-title">Pelaajakortit API:sta</h2>

    <section class="pp-player-grid" id="playerGrid"></section>
  </main>
</div>

<div class="pp-modal" id="playerModal">
  <div class="pp-profile">
    <button class="pp-close" type="button" id="modalClose">×</button>

    <div class="pp-profile-left">
      <div class="pp-profile-photo" id="modalInitials">SH</div>
      <div class="pp-profile-name" id="modalName">Siiri Heininen</div>
      <div class="pp-profile-meta" id="modalProfileMeta">
        Mailajuniorit<br>
        Pelaajaprofiili<br>
        Tiedot ja tilastot
      </div>
      <div class="pp-sponsor" id="modalSponsor">Kummiyritys Oy</div>
    </div>

    <div class="pp-profile-right">
      <div class="pp-accordion">
        <div class="pp-acc-item">
          <button class="pp-acc-btn is-active" type="button">Sarjan tilastot</button>
          <div class="pp-acc-content is-open" id="statsSeries"></div>
        </div>

        <div class="pp-acc-item">
          <button class="pp-acc-btn" type="button">Kauden kaikki tilastot</button>
          <div class="pp-acc-content" id="statsSeason"></div>
        </div>

        <div class="pp-acc-item">
          <button class="pp-acc-btn" type="button">Uratilastot</button>
          <div class="pp-acc-content" id="statsCareer"></div>
        </div>

        <div class="pp-acc-item">
          <button class="pp-acc-btn" type="button">Otteluhistoria</button>
          <div class="pp-acc-content">
            <div class="pp-stat-row"><span>Seuraava vaihe</span><strong>haetaan API:sta</strong></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/pesisportaali/assets/js/pesisportaali.js?v=1"></script>
</body>
</html>
