<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OCL Standings</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <style>
    .standings-row:hover {
      background-color: rgba(59, 130, 246, 0.1);
    }

    .playoff-position {
      background-color: rgba(16, 185, 129, 0.1);
    }

    .playoff-position:hover {
      background-color: rgba(16, 185, 129, 0.2);
    }

    @media (max-width: 640px) {
      .stats-cell {
        font-size: 0.75rem;
        padding: 0.5rem 0.25rem;
      }
    }
  </style>
</head>

<body class="bg-gray-100 min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <header class="text-center mb-8">
      <h1 class="text-4xl font-bold text-blue-900 mb-2">OCL Standings</h1>
      <p class="text-gray-600">Season 2024</p>
      <div class="mt-4 flex items-center justify-center space-x-4">
        <div class="flex items-center">
          <div class="w-4 h-4 bg-green-500 bg-opacity-10 border border-green-500"></div>
          <span class="ml-2 text-sm text-gray-600">Playoff Qualification</span>
        </div>
      </div>
    </header>

    <div class="bg-white rounded-lg shadow-lg overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="bg-blue-900 text-white">
            <th class="px-4 py-3 text-left">Pos</th>
            <th class="px-4 py-3 text-left">Team</th>
            <th class="px-4 py-3 text-center">MP</th>
            <th class="px-4 py-3 text-center">W</th>
            <th class="px-4 py-3 text-center">D</th>
            <th class="px-4 py-3 text-center">L</th>
            <th class="px-4 py-3 text-center">GF</th>
            <th class="px-4 py-3 text-center">GA</th>
            <th class="px-4 py-3 text-center">GD</th>
            <th class="px-4 py-3 text-center">Pts</th>
          </tr>
        </thead>
        <tbody id="standings-body">
          <!-- JavaScript will populate this -->
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const teams = {
      "Villarreal": {
        "name": "Villarreal Club de Fútbol, S.A.D.",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/05bb6454-b2ce-411a-9a11-38c171a91300/4k",
        "mp": 13,
        "w": 10,
        "d": 2,
        "l": 1,
        "gf": 42,
        "ga": 13,
        "gd": 29,
        "pts": 32
      },
      // "Manchester City": {
      //   "name": "Manchester City Football Club",
      //   "flag": "",
      //   "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/d858d088-3cb1-41c0-b89b-9f1079a7d500/4k",
      //   "mp": 11,
      //   "w": 9,
      //   "d": 0,
      //   "l": 2,
      //   "gf": 31,
      //   "ga": 11,
      //   "gd": 20,
      //   "pts": 27
      // },
      "Manchester United": {
        "name": "Manchester United Football Club",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/af313c62-d15d-4373-c4ce-3abdf020e600/4k",
        "mp": 13,
        "w": 8,
        "d": 2,
        "l": 3,
        "gf": 42,
        "ga": 26,
        "gd": 16,
        "pts": 26
      },
      "Arsenal": {
        "name": "Arsenal Football Club",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/d56104b5-56f3-4193-8abf-ccf3d9c49100/4k",
        "mp": 12,
        "w": 8,
        "d": 1,
        "l": 3,
        "gf": 42,
        "ga": 18,
        "gd": 24,
        "pts": 25
      },
      "Bayern Munchen": {
        "name": "Fußball-Club Bayern München e.V.",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/53e25818-555c-43b0-26c8-4fab67be2f00/4k",
        "mp": 12,
        "w": 6,
        "d": 0,
        "l": 6,
        "gf": 23,
        "ga": 20,
        "gd": 3,
        "pts": 18
      },
      "Atletico de Madrid": {
        "name": "Club Atlético de Madrid, S.A.D.",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/505347f8-785a-4fcd-3fe7-da7ef5c8c000/4k",
        "mp": 13,
        "w": 6,
        "d": 0,
        "l": 7,
        "gf": 23,
        "ga": 33,
        "gd": -10,
        "pts": 18
      },
      "Barcelona": {
        "name": "Futbol Club Barcelona",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/a2d32a57-b096-4821-ccf1-bd55f276cc00/4k",
        "mp": 11,
        "w": 5,
        "d": 1,
        "l": 5,
        "gf": 22,
        "ga": 21,
        "gd": 1,
        "pts": 16
      },
      "Real Madrid": {
        "name": "Real Madrid Club de Fútbol",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/a57950e7-cf70-445d-3986-551ff3e4fa00/4k",
        "mp": 13,
        "w": 5,
        "d": 1,
        "l": 7,
        "gf": 26,
        "ga": 39,
        "gd": -13,
        "pts": 16
      },
      "Liverpool": {
        "name": "Liverpool Football Club",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b9d09c08-7d0d-4fc3-90ab-98fdd3cdee00/4k",
        "mp": 13,
        "w": 5,
        "d": 0,
        "l": 8,
        "gf": 21,
        "ga": 30,
        "gd": -9,
        "pts": 15
      },
      "Stade Rennais": {
        "name": "Stade Rennais Football Club",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b19d31d3-7ea7-42c7-6c4b-55d40f27d000/4k",
        "mp": 12,
        "w": 4,
        "d": 1,
        "l": 7,
        "gf": 15,
        "ga": 29,
        "gd": -14,
        "pts": 13
      },
      "AC Milan": {
        "name": "Associazione Calcio Milan",
        "flag": "",
        "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/8068def8-d96f-4c86-0f80-97885dfcd900/4k",
        "mp": 13,
        "w": 2,
        "d": 1,
        "l": 10,
        "gf": 14,
        "ga": 31,
        "gd": -17,
        "pts": 7
      },
      // "Napoli": {
      //   "name": "Società Sportiva Calcio Napoli",
      //   "flag": "",
      //   "image": "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/0f509e90-881c-4bdc-eb45-643bde396400/4k",
      //   "mp": 10,
      //   "w": 0,
      //   "d": 1,
      //   "l": 9,
      //   "gf": 5,
      //   "ga": 35,
      //   "gd": -30,
      //   "pts": 1
      // }
    };

    function sortTeams() {
      return Object.entries(teams).sort((a, b) => {
        // Sort by points
        if (b[1].pts !== a[1].pts) return b[1].pts - a[1].pts;
        // Then by goal difference
        if (b[1].gd !== a[1].gd) return b[1].gd - a[1].gd;
        // Then by goals for
        if (b[1].gf !== a[1].gf) return b[1].gf - a[1].gf;
        // Then alphabetically
        return a[0].localeCompare(b[0]);
      });
    }

    function updateStandings() {
      const tbody = document.getElementById('standings-body');
      tbody.innerHTML = '';

      const sortedTeams = sortTeams();

      sortedTeams.forEach((team, index) => {
        const [teamName, stats] = team;
        const row = document.createElement('tr');
        row.className = `standings-row border-b transition-colors ${index < 4 ? 'playoff-position' : ''}`;

        row.innerHTML = `
                    <td class="px-4 py-3 font-semibold">${index + 1}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center space-x-3">
                            <img src="${stats.image}" alt="${teamName}" class="w-8 h-8 object-contain">
                            <span class="font-medium">${teamName}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.mp}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.w}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.d}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.l}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.gf}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.ga}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.gd}</td>
                    <td class="px-4 py-3 text-center font-semibold">${stats.pts}</td>
                `;

        tbody.appendChild(row);
      });
    }

    // Initial update
    updateStandings();
  </script>
</body>

</html>