{% extends "base.html" %}

{% block title %}{{ category.name }} - Vim Docs{% endblock %}

{% block header_title %}
<i class="mdi {{ category.icon }} mr-2"></i> {{ category.name }}
{% endblock %}

{% block header_actions %}
<a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="inline-flex items-center px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
    <i class="mdi mdi-plus mr-2"></i> New Document
</a>
<button id="edit-category-btn" class="inline-flex items-center px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors ml-2">
    <i class="mdi mdi-pencil mr-2"></i> Edit Category
</button>
{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Current category information -->
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg p-6">
        <div class="flex items-center mb-2">
            <div class="w-10 h-10 rounded-md bg-primary/20 flex items-center justify-center text-primary mr-3">
                <i class="mdi {{ category.icon }} text-2xl"></i>
            </div>
            <h1 class="text-2xl font-bold text-white">{{ category.name }}</h1>
        </div>
        
        <div class="text-gray-400 mb-4">
            {% if category.description %}
                {{ category.description }}
            {% else %}
                A category for organizing your documents
            {% endif %}
        </div>
        
        <div class="flex text-sm text-gray-500">
            <div class="flex items-center">
                <i class="mdi mdi-folder-outline mr-1"></i> 
                <a href="{{ url_for('main.index') }}" class="hover:text-primary">Home</a>
                {% if category.parent %}
                <span class="mx-2">/</span>
                <a href="{{ url_for('main.view_category', category_id=category.parent.id) }}" class="hover:text-primary">{{ category.parent.name }}</a>
                {% endif %}
                <span class="mx-2">/</span>
                <span class="text-gray-400">{{ category.name }}</span>
            </div>
        </div>
    </div>

    <!-- Subcategories -->
    {% if category.children.count() > 0 %}
    <div>
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold text-white">Subcategories</h2>
            <button id="add-subcategory-btn" class="icon-button">
                <i class="mdi mdi-plus"></i>
            </button>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {% for subcategory in category.children %}
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-lg transition-all hover:-translate-y-1 duration-200">
                <a href="{{ url_for('main.view_category', category_id=subcategory.id) }}" class="block p-5">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-md bg-primary/20 flex items-center justify-center text-primary mr-3">
                            <i class="mdi {{ subcategory.icon }} text-2xl"></i>
                        </div>
                        <h3 class="text-white font-medium truncate">{{ subcategory.name }}</h3>
                    </div>
                    
                    {% if subcategory.description %}
                    <p class="text-gray-400 text-sm mb-4 line-clamp-2">{{ subcategory.description }}</p>
                    {% endif %}
                    
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ subcategory.documents.count() }} document{{ '' if subcategory.documents.count() == 1 else 's' }}</span>
                        <span>{{ subcategory.children.count() }} subcategor{{ 'y' if subcategory.children.count() == 1 else 'ies' }}</span>
                    </div>
                </a>
            </div>
            {% endfor %}
            
            <!-- Add subcategory card -->
            <div id="add-subcategory-card" class="bg-gray-800/50 border-2 border-dashed border-gray-700 rounded-lg overflow-hidden hover:border-primary/50 hover:bg-gray-800/80 transition-all cursor-pointer">
                <div class="p-5 h-full flex flex-col items-center justify-center text-center">
                    <div class="w-12 h-12 rounded-full bg-gray-700/50 flex items-center justify-center mb-3">
                        <i class="mdi mdi-folder-plus-outline text-2xl text-gray-500"></i>
                    </div>
                    <h3 class="text-gray-400 font-medium mb-1">New Subcategory</h3>
                    <p class="text-gray-500 text-sm">Add a subcategory to {{ category.name }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Documents -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold text-white">Documents</h2>
            <a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="icon-button" title="New Document">
                <i class="mdi mdi-plus"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% if category.documents.count() > 0 %}
                {% for doc in category.documents %}
                <div class="bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow">
                    <div class="p-5">
                        <div class="flex items-start justify-between">
                            <h3 class="text-white font-medium mb-2 truncate">
                                <a href="{{ url_for('main.view_document', doc_id=doc.id) }}" class="hover:text-primary transition-colors">
                                    {{ doc.title }}
                                </a>
                            </h3>
                            <div class="dropdown relative ml-2">
                                <button class="icon-button p-1">
                                    <i class="mdi mdi-dots-vertical"></i>
                                </button>
                                <div class="dropdown-menu hidden absolute right-0 mt-2 w-40 bg-gray-700 rounded-md shadow-lg z-10">
                                    <a href="{{ url_for('main.edit_document', doc_id=doc.id) }}" class="block px-4 py-2 text-gray-300 hover:bg-gray-600 hover:text-white">
                                        <i class="mdi mdi-pencil mr-2"></i> Edit
                                    </a>
                                    <a href="{{ url_for('main.export_document', doc_id=doc.id) }}" class="block px-4 py-2 text-gray-300 hover:bg-gray-600 hover:text-white">
                                        <i class="mdi mdi-download mr-2"></i> Export
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-gray-400 text-sm mb-3 truncate">
                            {{ (doc.content[:100] + '...') if doc.content|length > 100 else doc.content }}
                        </div>
                        
                        <div class="flex items-center justify-between mt-4">
                            <div class="text-xs text-gray-500">
                                <i class="mdi mdi-calendar-outline mr-1"></i> {{ doc.updated_date.strftime('%b %d, %Y') }}
                            </div>
                        </div>
                        
                        {% if doc.tags %}
                        <div class="flex flex-wrap gap-1 mt-3">
                            {% for tag in doc.tags %}
                            <span class="text-xs px-2 py-1 bg-primary/20 text-primary rounded-full">{{ tag.name }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="col-span-full bg-gray-800/50 rounded-lg p-8 text-center">
                    <i class="mdi mdi-file-document-outline text-6xl text-gray-700 mb-3"></i>
                    <h3 class="text-lg text-gray-400 mb-3">No documents in this category</h3>
                    <p class="text-gray-500 mb-4">Create your first document in this category</p>
                    <a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="inline-flex items-center px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
                        <i class="mdi mdi-plus mr-2"></i> Create Document
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Category Modal -->
<div id="category-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center hidden">
    <div class="bg-gray-800 rounded-lg shadow-lg w-full max-w-md mx-4">
        <div class="flex items-center justify-between p-4 border-b border-gray-700">
            <h3 id="modal-title" class="text-lg font-medium text-white">Add Subcategory</h3>
            <button class="close-modal text-gray-400 hover:text-white">
                <i class="mdi mdi-close text-lg"></i>
            </button>
        </div>
        
        <div class="p-6">
            <form id="category-form" class="space-y-4">
                <input type="hidden" id="category-id" value="">
                
                <div>
                    <label for="category-name" class="block text-sm font-medium text-gray-400 mb-1">Name</label>
                    <input type="text" id="category-name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                </div>
                
                <div>
                    <label for="category-icon" class="block text-sm font-medium text-gray-400 mb-1">Icon</label>
                    <div class="flex items-center">
                        <input type="text" id="category-icon" value="mdi-folder-outline" class="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                        <div class="ml-3 w-10 h-10 flex items-center justify-center text-primary bg-primary/10 rounded-md">
                            <i id="icon-preview" class="mdi mdi-folder-outline text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-2 flex flex-wrap gap-2">
                        <button type="button" data-icon="mdi-folder-outline" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
                            <i class="mdi mdi-folder-outline"></i>
                        </button>
                        <button type="button" data-icon="mdi-folder-text-outline" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
                            <i class="mdi mdi-folder-text-outline"></i>
                        </button>
                        <button type="button" data-icon="mdi-code-braces" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
                            <i class="mdi mdi-code-braces"></i>
                        </button>
                        <button type="button" data-icon="mdi-database" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
                            <i class="mdi mdi-database"></i>
                        </button>
                        <button type="button" data-icon="mdi-web" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
                            <i class="mdi mdi-web"></i>
                        </button>
                        <button type="button" data-icon="mdi-book-outline" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
                            <i class="mdi mdi-book-outline"></i>
                        </button>
                    </div>
                </div>
                
                <div>
                    <label for="category-description" class="block text-sm font-medium text-gray-400 mb-1">Description (Optional)</label>
                    <input type="text" id="category-description" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                </div>
                
                <div>
                    <label for="category-parent" class="block text-sm font-medium text-gray-400 mb-1">Parent Category</label>
                    <select id="category-parent" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                        <option value="">None</option>
                        <option value="{{ category.id }}" selected>{{ category.name }}</option>
                    </select>
                </div>
                
                <div class="pt-4 flex justify-end space-x-3">
                    <button type="button" id="cancel-btn" class="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('category-modal');
        const addBtn = document.getElementById('add-subcategory-btn');
        const addCard = document.getElementById('add-subcategory-card');
        const editBtn = document.getElementById('edit-category-btn');
        const closeBtn = document.querySelector('.close-modal');
        const cancelBtn = document.getElementById('cancel-btn');
        const form = document.getElementById('category-form');
        const modalTitle = document.getElementById('modal-title');
        const iconInput = document.getElementById('category-icon');
        const iconPreview = document.getElementById('icon-preview');
        const iconSelectBtns = document.querySelectorAll('.icon-select');
        
        // Open modal
        function openModal(isEdit = false) {
            if (isEdit) {
                // Edit the current category
                modalTitle.textContent = 'Edit Category';
                document.getElementById('category-id').value = '{{ category.id }}';
                document.getElementById('category-name').value = '{{ category.name }}';
                document.getElementById('category-icon').value = '{{ category.icon }}';
                document.getElementById('category-parent').value = '{{ category.parent_id }}' || '';
                iconPreview.className = 'mdi {{ category.icon }} text-xl';
            } else {
                // Add new subcategory
                modalTitle.textContent = 'Add Subcategory';
                document.getElementById('category-id').value = '';
                document.getElementById('category-name').value = '';
                document.getElementById('category-icon').value = 'mdi-folder-outline';
                document.getElementById('category-parent').value = '{{ category.id }}';
                iconPreview.className = 'mdi mdi-folder-outline text-xl';
            }
            
            modal.classList.remove('hidden');
            document.getElementById('category-name').focus();
        }
        
        // Close modal
        function closeModal() {
            modal.classList.add('hidden');
        }
        
        // Update icon preview
        if (iconInput) {
            iconInput.addEventListener('input', function() {
                iconPreview.className = 'mdi ' + this.value + ' text-xl';
            });
        }
        
        // Icon selection
        iconSelectBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.getAttribute('data-icon');
                iconInput.value = icon;
                iconPreview.className = 'mdi ' + icon + ' text-xl';
                
                // Highlight selected icon
                iconSelectBtns.forEach(b => b.classList.remove('ring-2', 'ring-primary'));
                this.classList.add('ring-2', 'ring-primary');
            });
        });
        
        // Event listeners
        if (addBtn) addBtn.addEventListener('click', () => openModal(false));
        if (addCard) addCard.addEventListener('click', () => openModal(false));
        if (editBtn) editBtn.addEventListener('click', () => openModal(true));
        if (closeBtn) closeBtn.addEventListener('click', closeModal);
        if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
        
        // Form submission
        if (form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = {
                    id: document.getElementById('category-id').value || null,
                    name: document.getElementById('category-name').value,
                    icon: document.getElementById('category-icon').value,
                    description: document.getElementById('category-description').value,
                    parent_id: document.getElementById('category-parent').value || null
                };
                
                fetch('/api/category', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                })
                .then(response => response.json())
                .then(data => {
                    window.location.reload();
                })
                .catch(error => console.error('Error:', error));
            });
        }
        
        // Dropdown functionality for document cards
        document.querySelectorAll('.dropdown button').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const menu = this.nextElementSibling;
                menu.classList.toggle('hidden');
                
                // Close other open dropdowns
                document.querySelectorAll('.dropdown-menu:not(.hidden)').forEach(m => {
                    if (m !== menu) m.classList.add('hidden');
                });
            });
        });
        
        // Close dropdowns when clicking outside
        document.addEventListener('click', function() {
            document.querySelectorAll('.dropdown-menu:not(.hidden)').forEach(menu => {
                menu.classList.add('hidden');
            });
        });
    });
</script>
{% endblock %}