{% extends "layout.html" %}
{% block content %}
<div class="card" style="max-width: 500px; margin: auto;">
    <h2>Edit Activity: {{ activity.name }}</h2>
    <form method="POST" onsubmit="prepareSubcategories()">
        <label>Name</label>
        <input type="text" name="name" value="{{ activity.name }}" required>
        
        <label>Color</label>
        <input type="color" name="color" value="{{ activity.color }}" style="width:100%; height:40px; border:none; margin-bottom: 1rem;">
        
        <label>Subcategories</label>
        <p style="font-size: 0.8rem; color: #666; margin-top: -10px;">
            Define specific contexts here (e.g. Boss, Team, Client A)
        </p>
        
        <div style="display: flex; gap: 5px; margin-bottom: 10px;">
            <input type="text" id="newSubcat" placeholder="New subcategory..." style="margin-bottom: 0;">
            <button type="button" class="btn" style="background: #27ae60;" onclick="addSubcat()">Add</button>
        </div>

        <ul id="subcatList" style="list-style: none; padding: 0; margin-bottom: 1rem;">
            <!-- Items will be injected here -->
        </ul>
        
        <!-- Hidden input to store common separated list for backend -->
        <input type="hidden" name="subcategories" id="subcatsInput">
        
        <div style="display: flex; gap: 10px; margin-top: 20px;">
            <button type="submit" class="btn">Save Changes</button>
            <a href="{{ url_for('index') }}" class="btn" style="background: #95a5a6; text-decoration: none;">Cancel</a>
        </div>
    </form>
</div>

<script>
    // Initial data from server
    let subcategories = {{ activity.subcategories|default([])|tojson }};

    function renderList() {
        const list = document.getElementById('subcatList');
        list.innerHTML = '';
        subcategories.forEach((item, index) => {
            const li = document.createElement('li');
            li.style.background = '#f1f1f1';
            li.style.margin = '5px 0';
            li.style.padding = '8px';
            li.style.borderRadius = '5px';
            li.style.display = 'flex';
            li.style.justifyContent = 'space-between';
            li.style.alignItems = 'center';
            
            li.innerHTML = `
                <span>${item}</span>
                <span onclick="removeSubcat(${index})" style="cursor: pointer; color: #e74c3c; font-weight: bold; padding: 0 5px;">&times;</span>
            `;
            list.appendChild(li);
        });
    }

    function addSubcat() {
        const input = document.getElementById('newSubcat');
        const val = input.value.trim();
        if (val) {
            subcategories.push(val);
            input.value = '';
            renderList();
        }
    }

    function removeSubcat(index) {
        subcategories.splice(index, 1);
        renderList();
    }
    
    function prepareSubcategories() {
        document.getElementById('subcatsInput').value = subcategories.join(',');
    }

    // Render initially
    renderList();
</script>
{% endblock %}