<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        width: auto;
        margin: 0;
        padding: 0;
        background: #1a1a1a;
      }
      body {
        font-family: "Segoe UI", Arial, sans-serif;
        color: #ffffff;
        padding: 15px;
        box-sizing: border-box;
        width: fit-content; /* 让body宽度适应内容 */
        max-width: 500px; /* 设置最大宽度 */
      }
      .match-header {
        display: flex;
        flex-direction: column;
        padding: 8px 12px;
        background: #2a2a2a;
        border-radius: 5px;
        margin-bottom: 12px;
        width: calc(100% - 24px); /* 确保宽度计算正确 */
      }
      .match-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
      }
      .match-result {
        font-weight: bold;
        font-size: 1.1em;
        text-align: center;
        margin: 4px 0;
      }
      .teams {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%; /* 确保宽度为100% */
      }
      .team {
        background: #2a2a2a;
        border-radius: 5px;
        padding: 10px;
        position: relative;
        overflow: hidden;
        width: calc(100% - 20px); /* 确保宽度计算正确 */
      }
      /* 胜利/失败指示条 - 统一颜色 */
      .team::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
      }
      .team.win::before {
        background: linear-gradient(to right, #4caf50, #8bc34a);
      }
      .team.lose::before {
        background: linear-gradient(to right, #f44336, #ff9800);
      }
      .team-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        padding-bottom: 6px;
        padding-top: 4px;
        border-bottom: 1px solid #3a3a3a;
      }
      .team-header h2 {
        margin: 0;
        font-size: 1.2em;
      }
      .player-row {
        display: flex;
        align-items: center;
        padding: 6px;
        margin: 4px 0;
        background: #3a3a3a;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
      }
      .player-container {
        display: flex;
        flex: 1;
        align-items: center;
      }
      .hero-img {
        width: 45px;
        height: 25px;
        margin-right: 8px;
        border-radius: 3px;
        object-fit: cover;
      }
      .player-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .player-name {
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
        font-size: 0.9em;
        line-height: 1.2;
      }
      .player-rank {
        font-size: 0.6em;
        color: #aaaaaa;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
      }
      .friend {
        color: #4caf50;
      }
      .player-stats {
        display: flex;
        width: 180px;
        justify-content: space-between;
      }
      .stat-header {
        display: flex;
        margin-bottom: 5px;
        padding: 0 6px;
        align-items: center;
      }
      .stat-header-name {
        flex: 1;
        font-weight: bold;
        margin-left: 53px;
      }
      .stat-header-values {
        display: flex;
        width: 180px;
        justify-content: space-between;
      }
      .stat-header-cell {
        width: 60px;
        text-align: center;
        font-weight: bold;
        font-size: 0.9em;
      }
      .stat-cell {
        width: 60px;
        text-align: center;
        position: relative;
        font-size: 0.9em;
      }
      .stat-value {
        position: relative;
        z-index: 1;
      }
      .highest-gold {
        position: relative;
      }
      .highest-gold::before {
        content: "";
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
        bottom: 0;
        background: linear-gradient(
          to right,
          rgba(255, 215, 0, 0.2),
          rgba(255, 215, 0, 0.4)
        );
        border-radius: 3px;
      }
      .highest-damage {
        position: relative;
      }
      .highest-damage::before {
        content: "";
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
        bottom: 0;
        background: linear-gradient(
          to right,
          rgba(255, 0, 0, 0.2),
          rgba(255, 0, 0, 0.4)
        );
        border-radius: 3px;
      }
      .radiant-win {
        color: #4caf50;
      }
      .dire-win {
        color: #f44336;
      }
    </style>
  </head>
  <body>
    <div class="match-header">
      <div class="match-info">
        <div>比赛时长: {{ duration }}</div>
        <div>结束时间: {{ end_time }}</div>
      </div>
      <div
        class="match-result {% if radiant_win %}radiant-win{% else %}dire-win{% endif %}"
      >
        {% if radiant_win %}天辉胜利{% else %}夜魇胜利{% endif %}
      </div>
      <div class="match-info">
        <div>天辉: {{ radiant_score }}</div>
        <div>夜魇: {{ dire_score }}</div>
      </div>
    </div>

    <div class="teams">
      <div
        class="team radiant {% if radiant_win %}win{% else %}lose{% endif %}"
      >
        <div class="team-header">
          <h2>天辉</h2>
        </div>
        <div class="stat-header">
          <div class="stat-header-name">玩家</div>
          <div class="stat-header-values">
            <div class="stat-header-cell">KDA</div>
            <div class="stat-header-cell">经济</div>
            <div class="stat-header-cell">伤害</div>
          </div>
        </div>
        {% for player in radiant_players %}
        <div class="player-row">
          <div class="player-container">
            <img
              class="hero-img"
              src="{{ player.hero_img }}"
              alt="{{ player.hero }}"
            />
            <div class="player-info">
              <div
                class="player-name {% if player.is_friend %}friend{% endif %}"
              >
                {{ player.name }}
              </div>
              {% if player.rank_tier %}
              <div class="player-rank">{{ player.rank }}</div>
              {% endif %}
            </div>
          </div>
          <div class="player-stats">
            <div class="stat-cell">
              <span class="stat-value"
                >{{ player.kills }}/{{ player.deaths }}/{{ player.assists
                }}</span
              >
            </div>
            <div
              class="stat-cell {% if player.highest_gold %}highest-gold{% endif %}"
            >
              <span class="stat-value">{{ player.total_gold }}</span>
            </div>
            <div
              class="stat-cell {% if player.highest_damage %}highest-damage{% endif %}"
            >
              <span class="stat-value">{{ player.hero_damage }}</span>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

      <div
        class="team dire {% if not radiant_win %}win{% else %}lose{% endif %}"
      >
        <div class="team-header">
          <h2>夜魇</h2>
        </div>
        <div class="stat-header">
          <div class="stat-header-name">玩家</div>
          <div class="stat-header-values">
            <div class="stat-header-cell">KDA</div>
            <div class="stat-header-cell">经济</div>
            <div class="stat-header-cell">伤害</div>
          </div>
        </div>
        {% for player in dire_players %}
        <div class="player-row">
          <div class="player-container">
            <img
              class="hero-img"
              src="{{ player.hero_img }}"
              alt="{{ player.hero }}"
            />
            <div class="player-info">
              <div
                class="player-name {% if player.is_friend %}friend{% endif %}"
              >
                {{ player.name }}
              </div>
              {% if player.rank_tier %}
              <div class="player-rank">{{ player.rank }}</div>
              {% endif %}
            </div>
          </div>
          <div class="player-stats">
            <div class="stat-cell">
              <span class="stat-value"
                >{{ player.kills }}/{{ player.deaths }}/{{ player.assists
                }}</span
              >
            </div>
            <div
              class="stat-cell {% if player.highest_gold %}highest-gold{% endif %}"
            >
              <span class="stat-value">{{ player.total_gold }}</span>
            </div>
            <div
              class="stat-cell {% if player.highest_damage %}highest-damage{% endif %}"
            >
              <span class="stat-value">{{ player.hero_damage }}</span>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </body>
</html>
