<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="version" content="1.0.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>King of the beach</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="body">
    <div class="tournament-header"></div>

    <!-- Välj antal banor (synlig hela tiden) -->
    <div id="setup-form" class="persistent">
        <h2 id="number-of-courts-title">Välj antal banor</h2>
        <div id="court-selection">
            <div style="margin-top: 10px; margin-bottom: 10px;">
                <button type="button" id="selectOneCourtButton" class="button-gray">1 bana</button>
                <button type="button" id="selectTwoCourtsButton" class="button-gray">2 banor</button>
            </div>
        </div>
        <div id="court-display" class="hidden">
            <p><strong><span id="selectedCourts"></span></strong></p>
        </div>
    </div>

    <!-- Lägg till spelare -->
    <div id="player-form" class="hidden">
        <h2>Lägg till spelare</h2>
        <input type="text" id="playerName" placeholder="Spelarnamn" required>
        <button type="button" id="addPlayerButton" class="button-gray">Spara</button>
        <div id="playerList"></div>
        <div id="tooltip-wrapper">
            <button disabled id="generateTournamentButton" class="button-gray">Starta turneringen</button>
            <span id="tooltip">Lägg till flera spelare</span>
        </div>
    </div>

    <!-- Visar alla matcher och omgångar -->
    <div id="rounds-container" class="hidden">
        <h2>Spelschema</h2>
        <div id="rounds"></div>
        <br>
        <button id="addRound" class="button-gray">Lägg till omgång</button>
    </div>

    <!-- Rangordnad lista -->
    <div id="ranking-container" class="hidden">
        <h2>Spelarranking</h2>
        <div id="ranking"></div>
    </div>

    <!-- Information om hemsidan -->
    <div id="info-text">
        <h2 id="info-text-title">Vad är den här webbplatsen till för?</h2>
        <p>Gillar du att spela beachvolleyboll med vänner?</p>
        <p>Spela en "King of The Beach"-turnering där alla får 
            tävla mot alla. Denna webbplats hjälper till att skapa ett turneringsschema för 4 till 11 spelare på upp till 2 spelplaner.</p>
        <p>Turneringsformeln "King of the Beach" låter dig spela i lag minst en omgång med alla andra spelare.</p>
        <p>Varje match spelas i ett set till en viss poäng eller under en viss speltid.</p>
        <p>Du kan spela ett ojämnt antal spelare. Vissa spelare kommer då att få vila under varje omgång.</p>
        <p>Välj antal banor, lägg till spelare och starta turneringen. Efter varje match matar du in poängen och rankningstabellen uppdateras automatiskt.</p>
        <p>Beroende på tillgänglig tid kan du lägga till ytterligare omgångar.</p>
        <p>Let's play!</p>
    </div>

    <script src="script.js"></script>

</body>
</html>
