{% extends "base.html" %}

{% block title %}Players - DigiServer v2{% endblock %}

{% block content %}
<div class="container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h1>Players</h1>
        <a href="{{ url_for('players.add_player') }}" class="btn btn-success">+ Add New Player</a>
    </div>

    {% if players %}
    <div class="card">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #f8f9fa; text-align: left;">
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Name</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Hostname</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Location</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Group</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Orientation</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Status</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Last Seen</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for player in players %}
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 12px;">
                        <strong>{{ player.name }}</strong>
                    </td>
                    <td style="padding: 12px;">
                        <code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px;">{{ player.hostname }}</code>
                    </td>
                    <td style="padding: 12px;">
                        {{ player.location or '-' }}
                    </td>
                    <td style="padding: 12px;">
                        {% if player.group %}
                            <span style="background: #007bff; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">{{ player.group.name }}</span>
                        {% else %}
                            <span style="color: #6c757d;">No group</span>
                        {% endif %}
                    </td>
                    <td style="padding: 12px;">
                        {{ player.orientation or 'Landscape' }}
                    </td>
                    <td style="padding: 12px;">
                        {% set status = player_statuses.get(player.id, {}) %}
                        {% if status.get('is_online') %}
                            <span style="background: #28a745; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">Online</span>
                        {% else %}
                            <span style="background: #6c757d; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">Offline</span>
                        {% endif %}
                    </td>
                    <td style="padding: 12px;">
                        {% if player.last_heartbeat %}
                            {{ player.last_heartbeat.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                            <span style="color: #6c757d;">Never</span>
                        {% endif %}
                    </td>
                    <td style="padding: 12px;">
                        <a href="{{ url_for('players.player_page', player_id=player.id) }}" 
                           class="btn btn-info btn-sm" title="View" style="margin-right: 5px;">
                            👁️ View
                        </a>
                        <a href="{{ url_for('players.edit_player', player_id=player.id) }}" 
                           class="btn btn-primary btn-sm" title="Edit" style="margin-right: 5px;">
                            ✏️ Edit
                        </a>
                        <a href="{{ url_for('players.player_fullscreen', player_id=player.id) }}" 
                           class="btn btn-success btn-sm" title="Fullscreen" target="_blank" style="margin-right: 5px;">
                            ⛶ Full
                        </a>
                        <form method="POST" action="{{ url_for('players.delete_player', player_id=player.id) }}" 
                              style="display: inline;"
                              onsubmit="return confirm('Are you sure you want to delete player \'{{ player.name }}\'?');">
                            <button type="submit" class="btn btn-danger btn-sm" title="Delete">
                                🗑️ Delete
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div style="background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; padding: 15px; border-radius: 5px;">
        ℹ️ No players yet. <a href="{{ url_for('players.add_player') }}" style="color: #0c5460; text-decoration: underline;">Add your first player</a>
    </div>
    {% endif %}
</div>
{% endblock %}