{% extends "base.html" %}

{% block title %}Edit Game - DosVault{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="mb-6">
        <h1 class="text-3xl font-bold mb-2">Edit Game Metadata</h1>
        <p class="text-gray-400">Update the information for: {{ game.title }}</p>
    </div>
    
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <form method="POST" class="space-y-6">
            <div>
                <label for="title" class="block text-sm font-medium text-gray-300 mb-2">Title</label>
                <input type="text" id="title" name="title" 
                       value="{{ game.metadata_obj.title or game.title }}"
                       class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                       required>
            </div>
            
            <div>
                <label for="description" class="block text-sm font-medium text-gray-300 mb-2">Description</label>
                <textarea id="description" name="description" rows="4"
                          class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Enter game description...">{{ game.metadata_obj.description or '' }}</textarea>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="year" class="block text-sm font-medium text-gray-300 mb-2">Year</label>
                    <input type="number" id="year" name="year" 
                           value="{{ game.metadata_obj.year or '' }}"
                           min="1970" max="2030"
                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label for="players" class="block text-sm font-medium text-gray-300 mb-2">Players</label>
                    <input type="number" id="players" name="players" 
                           value="{{ game.metadata_obj.players or '' }}"
                           min="1" max="16"
                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="developer" class="block text-sm font-medium text-gray-300 mb-2">Developer</label>
                    <input type="text" id="developer" name="developer" 
                           value="{{ game.metadata_obj.developer or '' }}"
                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label for="publisher" class="block text-sm font-medium text-gray-300 mb-2">Publisher</label>
                    <input type="text" id="publisher" name="publisher" 
                           value="{{ game.metadata_obj.publisher or '' }}"
                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            
            <div class="flex justify-between pt-6">
                <a href="/games/{{ game.id }}" 
                   class="px-6 py-2 bg-gray-600 hover:bg-gray-700 rounded-md text-white transition-colors">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-white transition-colors">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}