<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="UTF-8" indent="yes"/>

  <xsl:template match="/cjenik">
    <html lang="hr">
      <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>Cjenik usluga · <xsl:value-of select="@trgovac"/></title>
        <style>
          :root { --navy: #2c2618; --navy-deep: #1a160d; --gold: #f0bc1f; --gold-soft: #faf3e3; --ink: #1a1a1a; --muted: #4a4a4a; --line: #e8e2d5; }
          * { box-sizing: border-box; }
          body { margin: 0; background: #f7f8fa; color: var(--ink); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
          header { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #fff; padding: 40px 24px 32px; }
          .wrap { max-width: 1040px; margin: 0 auto; }
          .kicker { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 10px; }
          h1 { font-family: Georgia, "Times New Roman", serif; font-size: 36px; margin: 0 0 8px; font-weight: 700; }
          .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: rgba(255,255,255,.75); font-size: 13px; margin-top: 14px; }
          .meta b { color: #fff; font-weight: 600; }
          main { padding: 28px 24px 56px; }
          h2 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; margin: 28px 0 12px; color: var(--navy); }
          .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(13,33,55,.05); }
          table { width: 100%; border-collapse: collapse; }
          th { background: var(--gold-soft); color: var(--navy); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
          td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
          tr:last-child td { border-bottom: 0; }
          tr:hover td { background: #fbfcfd; }
          .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
          .price { font-weight: 700; color: var(--navy); font-size: 16px; }
          .anchor { color: #916815; font-weight: 700; }
          .anchor.empty { color: var(--muted); font-weight: 400; font-size: 12px; }
          .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }
          .unit { color: var(--muted); font-size: 13px; }
          .note { background: var(--gold-soft); border: 1px solid #f0e2b8; border-radius: 12px; padding: 14px 16px; font-size: 14px; margin: 0 0 22px; }
          .note b { color: var(--navy); }
          .downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
          .downloads a { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 999px; text-decoration: none; }
          .downloads a.ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
          .downloads a:hover { filter: brightness(1.06); }
          footer { color: var(--muted); font-size: 13px; margin-top: 26px; }
          footer a { color: var(--navy); }
          @media (max-width: 640px) {
            h1 { font-size: 28px; }
            th:nth-child(1), td:nth-child(1) { display: none; }
            th, td { padding: 10px 10px; }
          }
        </style>
      </head>
      <body>
        <header>
          <div class="wrap">
            <p class="kicker">Cjenik usluga</p>
            <h1><xsl:value-of select="@trgovac"/></h1>
            <div class="meta">
              <span>Generirano: <b><xsl:value-of select="@generirano"/></b></span>
              <span>Valuta: <b><xsl:value-of select="@valuta"/></b></span>
              <span>Sidrena cijena na dan: <b><xsl:value-of select="@sidrena_referentni_datum"/></b></span>
              <span>Stavki: <b><xsl:value-of select="count(stavka)"/></b></span>
            </div>
            <div class="downloads">
              <a href="/cjenik.xml?dl=1" download="cjenik-blue-cave-tours.xml">&#8595; Preuzmi XML</a>
              <a href="/cjenik.csv?dl=1" download="cjenik-blue-cave-tours.csv">&#8595; Preuzmi CSV</a>
              <a class="ghost" href="/cjenik.xsl?dl=1" download="cjenik.xsl">&#8595; Preuzmi XSL</a>
            </div>
          </div>
        </header>
        <main>
          <div class="wrap">
            <p class="note">
              <b>Sidrena cijena</b> je redovna cijena usluge na referentni datum
              <xsl:text> </xsl:text><xsl:value-of select="@sidrena_referentni_datum"/> i ne mijenja se s aktualnom cijenom.
              Cijene su u eurima. Strojno čitljivi oblici: <a href="/cjenik.xml?dl=1">cjenik.xml</a>, <a href="/cjenik.csv?dl=1">cjenik.csv</a> i stilska datoteka <a href="/cjenik.xsl?dl=1">cjenik.xsl</a>.
            </p>

            <h2>Izleti</h2>
            <div class="card">
              <table>
                <thead>
                  <tr>
                    <th>Šifra</th>
                    <th>Naziv</th>
                    <th>Jedinica mjere</th>
                    <th class="num">Cijena</th>
                    <th class="num">Sidrena cijena</th>
                  </tr>
                </thead>
                <tbody>
                  <xsl:apply-templates select="stavka[kategorija='tura']"/>
                </tbody>
              </table>
            </div>

            <footer>
              <xsl:value-of select="@trgovac"/> · <a href="{@web}"><xsl:value-of select="@web"/></a> ·
              datum generiranja svake stavke: <xsl:value-of select="stavka[1]/datum_generiranja"/>
            </footer>
          </div>
        </main>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="stavka">
    <tr>
      <td class="code"><xsl:value-of select="sifra"/></td>
      <td><xsl:value-of select="naziv"/></td>
      <td class="unit"><xsl:value-of select="jedinica_mjere"/></td>
      <td class="num price"><xsl:value-of select="cijena"/> €</td>
      <td class="num">
        <xsl:choose>
          <xsl:when test="string-length(normalize-space(sidrena_cijena)) &gt; 0">
            <span class="anchor"><xsl:value-of select="sidrena_cijena"/> €</span>
          </xsl:when>
          <xsl:otherwise>
            <span class="anchor empty">u potvrdi</span>
          </xsl:otherwise>
        </xsl:choose>
      </td>
    </tr>
  </xsl:template>
</xsl:stylesheet>
