{% load static %}
<style>
  .vrobbler-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 400px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
  }
  .vrobbler-widget h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #333;
  }
  .vrobbler-media-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .vrobbler-media-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .vrobbler-media-item:last-child {
    border-bottom: none;
  }
  .vrobbler-rank {
    width: 24px;
    font-weight: bold;
    color: #666;
  }
  .vrobbler-media-info {
    flex: 1;
  }
  .vrobbler-media-title {
    font-weight: 500;
    color: #333;
  }
  .vrobbler-media-count {
    font-size: 12px;
    color: #888;
  }
  .vrobbler-completed {
    color: #2e7d32;
    margin-left: 4px;
  }
  .vrobbler-media-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 10px;
  }
  .vrobbler-error {
    color: #d32f2f;
  }
  .vrobbler-no-data {
    color: #666;
    font-style: italic;
  }
  {% if custom_css %}
  {{ custom_css }}
  {% endif %}
</style>

<div class="vrobbler-widget">
  <h3>Top {{ media_type }} - {{ period_label }}{% if user %} - {{ user.username }}{% endif %}</h3>
  
  {% if error %}
    <p class="vrobbler-error">{{ error }}</p>
  {% elif items %}
    <ul class="vrobbler-media-list">
      {% for item in items %}
        <li class="vrobbler-media-item">
          <span class="vrobbler-rank">{{ forloop.counter }}</span>
          {% if item.cover %}
            <img class="vrobbler-media-thumb" src="{{ item.cover_small.url }}" alt="{{ item.name }}">
          {% elif item.thumbnail %}
            <img class="vrobbler-media-thumb" src="{{ item.thumbnail_small.url }}" alt="{{ item.name }}">
          {% else %}
            <img class="vrobbler-media-thumb" src="{% static 'images/not-found.jpg' %}" alt="{{ item.name }}">
          {% endif %}
          <div class="vrobbler-media-info">
            <div class="vrobbler-media-title">{{ item.name }}{% if item.is_completed %} <span class="vrobbler-completed">✓</span>{% endif %}</div>
            <div class="vrobbler-media-count">{{ item.count }} {{ count_label }}</div>
          </div>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <p class="vrobbler-no-data">{{ no_data_message }}</p>
  {% endif %}
</div>