{% extends "pi_fyad/base.html" %}
{% load pi_fyad_tags %}

{% block pi_content %}

<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'pi_fyad:dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item active">{{ character.character_name }}</li>
    </ol>
</nav>

<div class="d-flex align-items-center mb-4">
    {% eve_character_portrait character.character_id 64 %}
    <div class="ms-3">
        <h3 class="mb-0">{{ character.character_name }}</h3>
        <span class="text-muted">{{ planet_data|length }} planet{{ planet_data|length|pluralize }}</span>
        {% if owner.last_planet_sync %}
        <span class="text-muted ms-2">· Synced {{ owner.last_planet_sync|timesince }} ago</span>
        {% endif %}
    </div>
</div>

<div class="row">
    {% for pd in planet_data %}
    <div class="col-lg-6 col-xl-4 mb-4">
        <div class="card pi-card h-100 {% if pd.summary.expired > 0 %}border-danger{% endif %}">
            <div class="card-header d-flex align-items-center">
                {% eve_planet_image pd.planet.planet_type_id 32 %}
                <div class="ms-2">
                    <h6 class="mb-0">{{ pd.planet.planet_name }}</h6>
                    <small class="text-muted">
                        {{ pd.planet.solar_system_name }} ·
                        {{ pd.planet.planet_type_id|planet_type_name }}
                    </small>
                </div>
            </div>
            <div class="card-body">
                <!-- Extractor Summary -->
                <div class="mb-3">
                    <h6 class="text-muted mb-2">Extractors</h6>
                    {% for ext in pd.extractors %}
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span>
                            {% eve_type_icon ext.type_id 24 %}
                            <span class="ms-1 small">{{ ext.extractor_product_name|default:"Unknown" }}</span>
                        </span>
                        <span>
                            {{ ext|extractor_status_badge }}
                            <small class="text-muted ms-1">{{ ext|time_remaining_display }}</small>
                        </span>
                    </div>
                    {% empty %}
                    <span class="text-muted small">No extractors</span>
                    {% endfor %}
                </div>

                <!-- Storage Summary -->
                {% for sp in pd.storage_pins %}
                <div class="mb-2">
                    <div class="d-flex justify-content-between small">
                        <span>
                            {% eve_type_icon sp.type_id 20 %}
                            {{ sp.type_name }}
                        </span>
                        <span>{{ sp.storage_fill_pct|percentage }}</span>
                    </div>
                    <div class="progress" style="height: 6px;">
                        <div class="progress-bar {{ sp|storage_fill_class }}"
                             style="width: {{ sp|storage_fill_bar_width }}%"></div>
                    </div>
                </div>
                {% endfor %}

                <!-- Factory Count -->
                {% if pd.factories %}
                <div class="mt-2">
                    <small class="text-muted">
                        {{ pd.factories|length }} factor{{ pd.factories|length|pluralize:"y,ies" }}
                        {% for f in pd.factories|slice:":1" %}
                        · Highest: {{ f.factory_tier|factory_tier_badge }}
                        {% endfor %}
                    </small>
                </div>
                {% endif %}
            </div>
            <div class="card-footer text-end">
                <a href="{% url 'pi_fyad:planet_detail' character.pk pd.planet.planet_id %}"
                   class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-search-plus me-1"></i>Details
                </a>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <div class="alert alert-info">No planets found for this character.</div>
    </div>
    {% endfor %}
</div>

{% endblock %}