{% extends "layout.twig" %}
{% block title %}{{ t('servers.title') }}{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold">{{ t('servers.title') }}</h1>
    <a href="/servers/create" class="gradient-bg text-white px-4 py-2 rounded"><i class="fas fa-plus"></i> {{ t('servers.add') }}</a>
  </div>
  
  {% if session.success_message %}
  <div class="mb-4 bg-green-50 border-l-4 border-green-400 p-4">
    <p class="text-sm text-green-700"><i class="fas fa-check-circle mr-2"></i>{{ session.success_message }}</p>
  </div>
  {% endif %}
  
  {% if session.error_message %}
  <div class="mb-4 bg-red-50 border-l-4 border-red-400 p-4">
    <p class="text-sm text-red-700"><i class="fas fa-exclamation-circle mr-2"></i>{{ session.error_message }}</p>
  </div>
  {% endif %}
  
  {% if servers|length > 0 %}
  <div class="bg-white rounded shadow overflow-hidden">
    <table class="w-full">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.name') }}</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.host') }}</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.status') }}</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.actions') }}</th>
        </tr>
      </thead>
      <tbody>
        {% for server in servers %}
        <tr class="border-t">
          <td class="px-6 py-4 font-medium">{{ server.name }}</td>
          <td class="px-6 py-4">{{ server.host }}</td>
          <td class="px-6 py-4">
            <span class="px-2 py-1 bg-{{ server.status == 'active' ? 'green' : 'yellow' }}-100 text-{{ server.status == 'active' ? 'green' : 'yellow' }}-800 rounded text-sm">
              {{ server.status }}
            </span>
          </td>
          <td class="px-6 py-4 space-x-3">
            <a href="/servers/{{ server.id }}" class="text-purple-600 hover:text-purple-900">
              <i class="fas fa-eye mr-1"></i>{{ t('servers.view') }}
            </a>
            <form method="POST" action="/servers/{{ server.id }}/delete" class="inline" 
                  onsubmit="return confirm('{{ t('message.confirm') }} Delete server {{ server.name }}?');">
              <button type="submit" class="text-red-600 hover:text-red-900">
                <i class="fas fa-trash mr-1"></i>{{ t('servers.delete') }}
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="bg-white rounded shadow p-12 text-center">
    <p class="text-gray-500 mb-4">{{ t('dashboard.no_servers') }}</p>
    <a href="/servers/create" class="gradient-bg text-white px-6 py-3 rounded inline-block">{{ t('dashboard.add_first_server') }}</a>
  </div>
  {% endif %}
</div>
{% endblock %}