<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flash Squad</title>
  <link rel="stylesheet" href="styles.css">
  <script defer src="app.js"></script>
</head>
<body>

  <div id="players-container">
    
  </div>
  

  <div class="page-container">
    <div class="container">
      <div class="squad-body">
        <header class="header">
          <div class="profile">
            <img src="avatar.png" alt="User Profile" class="profile-pic">
            <div class="profile-info">
              <p class="username">username</p>
              <p class="uid">(UID: 0)</p>
            </div>
          </div>
          <h1 class="title">FLASH SQUAD</h1>
          <button class="close-btn">&times;</button>
        </header>

        <div class="main-content">
          <div class="main-container" id="main-container">
            
            <div class="squad-page">
              <div class="tab-container" id="tab-container">
                <div class="tab public active" id="public-tab">
                  <img src="public.png" alt="Public">
                  <span class="tab-text">Public</span>
                </div>
                <div class="tab private" id="private-tab">
                  <img src="private.png" alt="Private">
                  <span class="tab-text">Privée</span>
                </div>
                
                <div class="search-container">
                  <img src="search.png" alt="Search Icon" class="search-icon">
                  <input type="text" id="search-bar" class="search-bar">
                </div>
              </div>
              
              <div class="mysquad" id="mysquad">

              </div>

              <div class="squad-list" id="squad-list">
                
              </div>
            </div>

            <div id="password-modal">
              <div class="modal-content">
                  <h2>Entrez le mot de passe pour rejoindre la squad</h2>
                  <input type="password" id="password-input" placeholder="Mot de passe" />
                  <button id="password-submit">Rejoindre</button>
                  <button id="password-cancel">Annuler</button>
              </div>
            </div>

            <div id="message-modal">
              <div class="modal-content2">
                <h2>Envoyer un message</h2>
                <textarea id="message-input"></textarea>
                <button id="send-message-btn">Envoyer</button>
                <button id="cancel-message-btn">Annuler</button>
              </div>
            </div>
            

            <div class="footer" id="footer">
              <button class="settings-btn">
                <img src="settings.png" alt="Settings Icon" class="settings-icon">
                Paramètres
                <button class="mysquad-btn">Gérer ma squad</button>
              </button>
              
              <button class="create-squad-btn">Créer une squad</button>
            </div>
          </div>
          
          <div class="create-squad-form" id="create-squad-form" style="display: none;">
            <h2>CREATE SQUAD</h2>
            <form id="create-squad">
                <label for="squad-name">Nom de l'escouade:</label>
                <input type="text" id="squad-name" name="squad-name" required />
        
                <label for="squad-description">Devise de l'escouade:</label>
                <input id="squad-description" name="squad-description" required />
        
                <label>Visibilité :</label>
                <div class="visibility-toggle">
                    <div>
                        <input type="radio" id="public" name="visibility" value="public" checked />
                        <label for="public">PUBLIQUE</label>
                    </div>
                    <div>
                        <input type="radio" id="private" name="visibility" value="private" />
                        <label for="private">PRIVÉE</label>
                    </div>
                </div>
        
                <div id="password-field">
                    <label for="squad-password">Mot de passe de l'escouade:</label>
                    <input type="password" id="squad-password" name="squad-password" disabled />
                </div>
        
                <button type="submit">Create Squad</button>
            </form>
            <button id="cancel-create-squad" class="cancel-btn">Annuler</button>
        </div>
        
        
          
        </div>
      </div>
    </div>
  </div>
</body>
</html>
