{% extends "hangarready/base.html" %}
{% load static %}

{% block page_subtitle %}
    - Manage Characters
{% endblock %}

{% block hangar_content %}
<div class="row mb-3">
    <div class="col-lg-12">
        <a href="{% url 'hangarready:index' %}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-left"></i> Back to Dashboard
        </a>
        <a href="{% url 'hangarready:update_all_characters' %}" class="btn btn-success"
           onclick="return confirm('This will update all your characters. Continue?');">
            <i class="fa-solid fa-sync"></i> Update All Assets
        </a>
        <a href="{% url 'hangarready:fetch_structures' %}" class="btn btn-warning"
           title="Fetch structure names from ESI">
            <i class="fa-solid fa-building"></i> Fetch Structures
        </a>
        {% if perms.hangarready.view_all_characters %}
        <form method="post" action="{% url 'hangarready:bulk_add_characters' %}" style="display: inline;"
              onsubmit="return confirm('This will automatically add all characters that have granted the required ESI scopes. Continue?');">
            {% csrf_token %}
            <button type="submit" class="btn btn-info" title="Admin: Bulk add all characters with ESI scopes">
                <i class="fa-solid fa-users-gear"></i> Bulk Add Characters
            </button>
        </form>
        {% endif %}
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">
                    <i class="fa-solid fa-users"></i> Tracked Characters
                </h4>
            </div>
            <div class="card-body">
                {% if tracked_characters %}
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Character</th>
                                <th>Corporation</th>
                                <th>Last Update</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for char_asset in tracked_characters %}
                            <tr {% if char_asset.is_stale %}class="stale-data"{% endif %}>
                                <td>
                                    <img src="https://images.evetech.net/characters/{{ char_asset.character.character_id }}/portrait?size=32"
                                         class="rounded me-2" alt="{{ char_asset.character.character_name }}">
                                    {{ char_asset.character.character_name }}
                                </td>
                                <td>{{ char_asset.character.corporation_name }}</td>
                                <td>
                                    {{ char_asset.last_update|timesince }} ago
                                    {% if char_asset.is_stale %}
                                    <span class="badge bg-warning">Stale</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if char_asset.is_active %}
                                    <span class="badge bg-success">Active</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                    {% if char_asset.update_error %}
                                    <span class="badge bg-danger"
                                          data-bs-toggle="tooltip"
                                          title="{{ char_asset.update_error }}">
                                        Error
                                    </span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'hangarready:update_character' char_asset.character.character_id %}"
                                           class="btn btn-sm btn-primary"
                                           title="Update Now">
                                            <i class="fa-solid fa-refresh"></i>
                                        </a>
                                        <a href="{% url 'hangarready:toggle_character' char_asset.character.character_id %}"
                                           class="btn btn-sm btn-warning"
                                           title="{% if char_asset.is_active %}Disable{% else %}Enable{% endif %}">
                                            <i class="fa-solid fa-{% if char_asset.is_active %}pause{% else %}play{% endif %}"></i>
                                        </a>
                                        <form method="post"
                                              action="{% url 'hangarready:remove_character' char_asset.character.character_id %}"
                                              style="display: inline;"
                                              onsubmit="return confirm('Are you sure you want to remove this character?');">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-danger" title="Remove">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fa-solid fa-info-circle"></i> No characters are currently being tracked.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">
                    <i class="fa-solid fa-user-plus"></i> Add Characters
                </h4>
            </div>
            <div class="card-body">
                {% if available_characters %}
                <p>Click on a character to add them for asset tracking. You will be redirected to EVE SSO to grant permissions.</p>
                <div class="list-group">
                    {% for ownership in available_characters %}
                    <a href="{% url 'hangarready:add_character' %}?next={% url 'hangarready:characters' %}"
                       class="list-group-item list-group-item-action">
                        <div class="d-flex align-items-center">
                            <img src="https://images.evetech.net/characters/{{ ownership.character.character_id }}/portrait?size=64"
                                 class="rounded me-3" alt="{{ ownership.character.character_name }}">
                            <div>
                                <h5 class="mb-1">{{ ownership.character.character_name }}</h5>
                                <p class="mb-1 text-muted">{{ ownership.character.corporation_name }}</p>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fa-solid fa-info-circle"></i> All your characters are already being tracked.
                    <a href="{% url 'authentication:dashboard' %}">Add more characters to your account</a> to track them here.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_script %}
<script>
// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
{% endblock %}