{% extends "layout.html" %}

{% block content %}
<div class="timetrack-container">
    <h2>Edit Project: {{ project.name }}</h2>
    
    <form method="POST" action="{{ url_for('edit_project', project_id=project.id) }}" class="project-form">
        <div class="form-row">
            <div class="form-group">
                <label for="name">Project Name *</label>
                <input type="text" id="name" name="name" required 
                       value="{{ request.form.name if request.form.name else project.name }}"
                       placeholder="Enter project name">
            </div>
            
            <div class="form-group">
                <label for="code">Project Code *</label>
                <input type="text" id="code" name="code" required 
                       value="{{ request.form.code if request.form.code else project.code }}"
                       placeholder="e.g., PRJ001" maxlength="20" style="text-transform: uppercase;">
            </div>
        </div>
        
        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description" rows="3" 
                      placeholder="Enter project description">{{ request.form.description if request.form.description else (project.description or '') }}</textarea>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="team_id">Assigned Team</label>
                <select id="team_id" name="team_id">
                    <option value="">All Teams</option>
                    {% for team in teams %}
                    <option value="{{ team.id }}" 
                            {% if (request.form.team_id and request.form.team_id|int == team.id) or (not request.form.team_id and project.team_id == team.id) %}selected{% endif %}>
                        {{ team.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="category_id">Project Category</label>
                <select id="category_id" name="category_id">
                    <option value="">No Category</option>
                    {% for category in categories %}
                    <option value="{{ category.id }}" 
                            {% if (request.form.category_id and request.form.category_id|int == category.id) or (not request.form.category_id and project.category_id == category.id) %}selected{% endif %}>
                        {{ category.icon or '📁' }} {{ category.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="is_active" 
                           {% if (request.form.is_active and request.form.is_active == 'on') or (not request.form and project.is_active) %}checked{% endif %}>
                    Active Project
                </label>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="start_date">Start Date</label>
                <input type="date" id="start_date" name="start_date" 
                       value="{{ request.form.start_date if request.form.start_date else (project.start_date.strftime('%Y-%m-%d') if project.start_date else '') }}">
            </div>
            
            <div class="form-group">
                <label for="end_date">End Date</label>
                <input type="date" id="end_date" name="end_date" 
                       value="{{ request.form.end_date if request.form.end_date else (project.end_date.strftime('%Y-%m-%d') if project.end_date else '') }}">
            </div>
        </div>
        
        <div class="project-info">
            <div class="info-row">
                <span class="info-label">Created by:</span>
                <span class="info-value">{{ project.created_by.username }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Created on:</span>
                <span class="info-value">{{ project.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Time entries:</span>
                <span class="info-value">{{ project.time_entries|length }}</span>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn">Update Project</button>
            <a href="{{ url_for('admin_projects') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<style>
.project-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1.5rem;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.project-info {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    font-weight: 500;
    color: #666;
}

.info-value {
    color: #333;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Button styles now centralized in main style.css */

#code {
    text-transform: uppercase;
}
</style>

<script>
// Auto-uppercase project code
document.getElementById('code').addEventListener('input', function(e) {
    e.target.value = e.target.value.toUpperCase();
});
</script>
{% endblock %}