<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
  <head>
    <!-- Meta Tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="py-draughts - A Python draughts/checkers game with AI engine" />
    
    <title>py-draughts | Draughts Game</title>

    <!-- Bootstrap 5.3 CSS -->
    <link 
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
      crossorigin="anonymous"
    />

    <!-- Bootstrap Icons -->
    <link 
      rel="stylesheet" 
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"
    />

    <!-- Custom Styles -->
    <link 
      href="{{ url_for('static', path='css/style.css') }}" 
      rel="stylesheet" 
    />
  </head>

  <body>
    {% block content %}{% endblock %}

    <!-- jQuery (required for game logic) -->
    <script 
      src="https://code.jquery.com/jquery-3.7.1.min.js" 
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
      crossorigin="anonymous"
    ></script>

    <!-- Bootstrap 5.3 Bundle with Popper -->
    <script 
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
      crossorigin="anonymous"
    ></script>

    <!-- Custom Scripts -->
    <script src="{{ url_for('static', path='js/script.js') }}" defer></script>
  </body>
</html>
