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