{% extends "layouts/base.html" %}
{% load i18n static l10n %}
{% load itens_extras %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'marketplace/css/marketplace.css' %}?v=1.0">
{% endblock %}

{% block content %}
<div class="reports-container">
  <div class="container">
    <!-- Header Épico -->
    <div class="reports-header marketplace-header">
      <div class="marketplace-header-icon">
        <i class="fas fa-dragon"></i>
      </div>
      <h1 class="reports-title marketplace-title">
        {% trans "Marketplace de Personagens" %}
      </h1>
      <p class="reports-subtitle marketplace-subtitle">
        <i class="fas fa-shield-alt me-2"></i>{% trans "Compre e venda personagens épicos com total segurança" %}
      </p>
      <div class="marketplace-stats">
        <div class="stat-box">
          <i class="fas fa-users"></i>
          <span class="stat-value">{{ transfers|length }}</span>
          <span class="stat-label">{% trans "Personagens" %}</span>
        </div>
        <div class="stat-box">
          <i class="fas fa-fire"></i>
          <span class="stat-value">{% trans "LIVE" %}</span>
          <span class="stat-label">{% trans "Marketplace" %}</span>
        </div>
        <div class="stat-box">
          <i class="fas fa-check-circle"></i>
          <span class="stat-value">100%</span>
          <span class="stat-label">{% trans "Seguro" %}</span>
        </div>
      </div>
    </div>

    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-4">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{% trans "Marketplace" %}</li>
      </ol>
    </nav>

    <!-- Action Buttons Épicos -->
    <div class="marketplace-actions-epic">
      <a href="{% url 'marketplace:sell' %}" class="action-card action-sell">
        <div class="action-icon">
          <i class="fas fa-plus-circle"></i>
        </div>
        <div class="action-content">
          <h3 class="action-title">{% trans "Vender Personagem" %}</h3>
          <p class="action-description">{% trans "Liste seu personagem no marketplace" %}</p>
        </div>
        <div class="action-arrow">
          <i class="fas fa-chevron-right"></i>
        </div>
      </a>
      
      <a href="{% url 'marketplace:my_sales' %}" class="action-card action-sales">
        <div class="action-icon">
          <i class="fas fa-list-alt"></i>
        </div>
        <div class="action-content">
          <h3 class="action-title">{% trans "Minhas Vendas" %}</h3>
          <p class="action-description">{% trans "Personagens que você está vendendo" %}</p>
        </div>
        <div class="action-arrow">
          <i class="fas fa-chevron-right"></i>
        </div>
      </a>
      
      <a href="{% url 'marketplace:my_purchases' %}" class="action-card action-purchases">
        <div class="action-icon">
          <i class="fas fa-shopping-bag"></i>
        </div>
        <div class="action-content">
          <h3 class="action-title">{% trans "Minhas Compras" %}</h3>
          <p class="action-description">{% trans "Personagens que você adquiriu" %}</p>
        </div>
        <div class="action-arrow">
          <i class="fas fa-chevron-right"></i>
        </div>
      </a>
    </div>

    <!-- Characters for Sale -->
    <div class="reports-card">
      <div class="reports-card-header">
        <i class="fas fa-users reports-icon"></i>
        <h2 class="reports-card-title">{% trans "Personagens à Venda" %}</h2>
        <p class="reports-card-description">{% trans "Personagens disponíveis no marketplace" %}</p>
      </div>
      <div class="reports-card-body">
        {% if transfers %}
        <div class="marketplace-grid">
          {% for transfer in transfers %}
          <div class="character-card">
            <div class="character-card-header">
              <div class="character-badge">
                <span class="character-level">LVL {{ transfer.char_level }}</span>
                <span class="character-class">{{ transfer.class_name }}</span>
              </div>
              {% if transfer.status == 'for_sale' %}
              <span class="status-badge status-sale">{% trans "À Venda" %}</span>
              {% endif %}
            </div>

            <div class="character-info">
              <h3 class="character-name">{{ transfer.char_name }}</h3>
              <div class="character-stats">
                <div class="stat-item">
                  <i class="fas fa-sword"></i>
                  <span>PvP: {{ transfer.pvp_kills|default:"0" }}</span>
                </div>
                <div class="stat-item">
                  <i class="fas fa-skull"></i>
                  <span>PK: {{ transfer.pk_count|default:"0" }}</span>
                </div>
              </div>
            </div>

            <div class="character-price">
              <span class="price-label">{% trans "Preço" %}</span>
              <div class="price-value">
                <span class="currency">R$</span>
                <span class="amount">{{ transfer.price }}</span>
              </div>
            </div>

            <div class="character-seller">
              <i class="fas fa-user me-2"></i>
              <span>{% trans "Vendedor" %}: {{ transfer.seller.username }}</span>
            </div>

            <div class="character-date">
              <i class="far fa-clock me-2"></i>
              <span>{{ transfer.listed_at|date:"d/m/Y H:i" }}</span>
            </div>

            <div class="character-actions">
              <a href="{% url 'marketplace:character_detail' transfer.id %}" class="btn btn-primary btn-block">
                <i class="fas fa-eye me-2"></i>{% trans "Ver Detalhes" %}
              </a>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
          <i class="fas fa-user-slash fa-3x mb-3"></i>
          <p>{% trans "Nenhum personagem disponível no marketplace no momento." %}</p>
          <a href="{% url 'marketplace:sell' %}" class="btn btn-primary mt-3">
            <i class="fas fa-plus-circle me-2"></i>{% trans "Vender Primeiro Personagem" %}
          </a>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Return Button -->
    <div class="text-center mt-4">
      <a href="{% url 'dashboard' %}" class="report-back-button">
        <i class="fas fa-arrow-left me-2"></i>{% trans "Voltar ao Dashboard Principal" %}
      </a>
    </div>
  </div>
</div>
{% endblock %}

{% block extrajs %}
<script src="{% static 'marketplace/js/marketplace.js' %}?v=1.0"></script>
{% endblock %}