<!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;
        max-width: 600px;
      }
      .header {
        display: flex;
        flex-direction: column;
        padding: 8px 12px;
        background: #2a2a2a;
        border-radius: 5px;
        margin-bottom: 12px;
        width: calc(100% - 24px);
      }
      .header-title {
        font-size: 1.3em;
        font-weight: bold;
        text-align: center;
        margin-bottom: 8px;
      }
      .matches-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
      }
      .match-card {
        background: #2a2a2a;
        border-radius: 5px;
        padding: 10px;
        position: relative;
        overflow: hidden;
        width: calc(100% - 20px);
      }
      /* 胜利/失败指示条 */
      .match-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
      }
      .match-card.win::before {
        background: linear-gradient(to right, #4caf50, #8bc34a);
      }
      .match-card.lose::before {
        background: linear-gradient(to right, #f44336, #ff9800);
      }
      .match-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }
      .match-time {
        font-size: 0.8em;
        color: #aaaaaa;
      }
      .match-details {
        display: flex;
        align-items: center;
      }
      .hero-img {
        width: 60px;
        height: 34px;
        border-radius: 3px;
        margin-right: 10px;
        object-fit: cover;
      }
      .match-stats {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
      }
      .kda {
        font-weight: bold;
        font-size: 1.1em;
        margin-bottom: 3px;
      }
      .match-info {
        display: flex;
        gap: 12px;
        font-size: 0.9em;
        color: #dddddd;
        flex-wrap: nowrap;
      }
      .match-duration,
      .match-party,
      .match-rank {
        display: flex;
        align-items: center;
        white-space: nowrap;
      }
      .match-duration::before {
        content: "️";
        margin-right: 3px;
      }
      .match-party::before {
        content: "";
        margin-right: 3px;
      }
      .match-rank::before {
        content: "";
        margin-right: 3px;
      }
      .win-text {
        color: #4caf50;
      }
      .lose-text {
        color: #f44336;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="header-title">{{ player_name }}的最近比赛</div>
    </div>

    <div class="matches-container">
      {% for match in matches %}
      <div class="match-card {% if match.win %}win{% else %}lose{% endif %}">
        <div class="match-header">
          <div
            class="match-result {% if match.win %}win-text{% else %}lose-text{% endif %}"
          >
            {% if match.win %}胜利{% else %}失败{% endif %}
          </div>
          <div class="match-time">{{ match.end_time_formatted }}</div>
        </div>
        <div class="match-details">
          <img
            class="hero-img"
            src="{{ match.hero_img }}"
            alt="{{ match.hero_name }}"
          />
          <div class="match-stats">
            <div class="kda">
              {{ match.kills }} / {{ match.deaths }} / {{ match.assists }}
            </div>
            <div class="match-info">
              <div class="match-duration">{{ match.duration_formatted }}</div>
              {% if match.party_size %}
              <div class="match-party">
                {% if match.party_size == 1 %} 单排 {% else %} {{
                match.party_size }}黑 {% endif %}
              </div>
              {% endif %} {% if match.average_rank %}
              <div class="match-rank">{{ match.average_rank }}</div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </body>
</html>
