{% extends 'base.html' %}

{% block title %}{{ 'Edit' if content_block else 'Create' }} Content Block | Admin | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('admin.content_blocks') }}">Content Blocks</a></li>
                <li class="breadcrumb-item active">{{ 'Edit' if content_block else 'Create' }}</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">{{ 'Edit' if content_block else 'Create' }} Content Block</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <form action="{{ url_for('admin.edit_content_block', id=content_block.id) if content_block else url_for('admin.add_content_block') }}" 
              method="POST" id="contentForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="row">
                <div class="col-lg-8">
                    <!-- Main Content -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-edit me-2"></i>Content Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" required
                                           value="{{ content_block.title if content_block else '' }}"
                                           placeholder="e.g., Home Page Hero Title">
                                    <div class="form-text">Display name for this content block</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="page" class="form-label">Page <span class="text-danger">*</span></label>
                                    <select class="form-select" id="page" name="page" required>
                                        <option value="">Select page...</option>
                                        <option value="home" {{ 'selected' if (content_block and content_block.page == 'home') or request.args.get('page') == 'home' }}>Home</option>
                                        <option value="about" {{ 'selected' if (content_block and content_block.page == 'about') or request.args.get('page') == 'about' }}>About</option>
                                        <option value="for_authors" {{ 'selected' if (content_block and content_block.page == 'for_authors') or request.args.get('page') == 'for_authors' }}>For Authors</option>
                                        <option value="open_access" {{ 'selected' if (content_block and content_block.page == 'open_access') or request.args.get('page') == 'open_access' }}>Open Access</option>
                                        <option value="contact" {{ 'selected' if (content_block and content_block.page == 'contact') or request.args.get('page') == 'contact' }}>Contact</option>
                                        <option value="footer" {{ 'selected' if (content_block and content_block.page == 'footer') or request.args.get('page') == 'footer' }}>Footer</option>
                                        <option value="sidebar" {{ 'selected' if (content_block and content_block.page == 'sidebar') or request.args.get('page') == 'sidebar' }}>Sidebar</option>
                                        <option value="global" {{ 'selected' if (content_block and content_block.page == 'global') or request.args.get('page') == 'global' }}>Global</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="identifier" class="form-label">Identifier <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="identifier" name="identifier" required
                                           value="{{ content_block.identifier if content_block else request.args.get('identifier', '') }}"
                                           placeholder="e.g., hero_title" pattern="[a-z0-9_]+"
                                           {{ 'readonly' if content_block else '' }}>
                                    <div class="form-text">Unique identifier (lowercase letters, numbers, underscores only)</div>
                                </div>
                                <div class="col-12">
                                    <label for="content" class="form-label">Content</label>
                                    <textarea class="form-control" id="content" name="content" rows="12"
                                              placeholder="Enter your content here...">{{ content_block.content if content_block else '' }}</textarea>
                                    <div class="form-text">HTML is supported for rich content</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- HTML Editor Toolbar -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-code me-2"></i>Formatting Toolbar</h5>
                        </div>
                        <div class="card-body">
                            <div class="btn-toolbar gap-2" role="toolbar">
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertTag('strong')" title="Bold">
                                        <i class="fas fa-bold"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertTag('em')" title="Italic">
                                        <i class="fas fa-italic"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertTag('u')" title="Underline">
                                        <i class="fas fa-underline"></i>
                                    </button>
                                </div>
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertHeading(2)" title="Heading 2">
                                        H2
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertHeading(3)" title="Heading 3">
                                        H3
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertHeading(4)" title="Heading 4">
                                        H4
                                    </button>
                                </div>
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertTag('p')" title="Paragraph">
                                        <i class="fas fa-paragraph"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertList('ul')" title="Bullet List">
                                        <i class="fas fa-list-ul"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertList('ol')" title="Numbered List">
                                        <i class="fas fa-list-ol"></i>
                                    </button>
                                </div>
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertLink()" title="Link">
                                        <i class="fas fa-link"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="insertImage()" title="Image">
                                        <i class="fas fa-image"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <!-- Actions -->
                    <div class="card border-0 shadow-sm mb-4 sticky-top" style="top: 100px;">
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary py-2">
                                    <i class="fas fa-save me-2"></i>{{ 'Save Changes' if content_block else 'Create Block' }}
                                </button>
                                <a href="{{ url_for('admin.content_blocks') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Preview -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-eye me-2"></i>Preview</h5>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="updatePreview()">
                                Refresh
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="contentPreview" class="border rounded p-3" style="min-height: 100px; background: #f8f9fa;">
                                <em class="text-muted">Enter content to see preview...</em>
                            </div>
                        </div>
                    </div>
                    
                    {% if content_block %}
                    <!-- Info -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Information</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-sm table-borderless mb-0">
                                <tr>
                                    <th class="text-muted">Created</th>
                                    <td>{{ content_block.created_at.strftime('%b %d, %Y %H:%M') }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">Updated</th>
                                    <td>{{ content_block.updated_at.strftime('%b %d, %Y %H:%M') }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">Usage</th>
                                    <td><code>get_content('{{ content_block.page }}', '{{ content_block.identifier }}')</code></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </form>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
const contentTextarea = document.getElementById('content');
const previewDiv = document.getElementById('contentPreview');

// Auto-generate identifier from title
document.getElementById('title').addEventListener('input', function() {
    const identifierInput = document.getElementById('identifier');
    if (!identifierInput.readOnly) {
        const slug = this.value.toLowerCase()
            .replace(/[^\w\s]/g, '')
            .replace(/[\s]+/g, '_')
            .substring(0, 50);
        identifierInput.value = slug;
    }
});

// Formatting functions
function insertTag(tag) {
    const start = contentTextarea.selectionStart;
    const end = contentTextarea.selectionEnd;
    const text = contentTextarea.value;
    const selected = text.substring(start, end);
    
    const newText = `<${tag}>${selected}</${tag}>`;
    contentTextarea.value = text.substring(0, start) + newText + text.substring(end);
    contentTextarea.focus();
    contentTextarea.setSelectionRange(start + tag.length + 2, start + tag.length + 2 + selected.length);
    updatePreview();
}

function insertHeading(level) {
    const start = contentTextarea.selectionStart;
    const end = contentTextarea.selectionEnd;
    const text = contentTextarea.value;
    const selected = text.substring(start, end) || 'Heading';
    
    const newText = `<h${level}>${selected}</h${level}>\n`;
    contentTextarea.value = text.substring(0, start) + newText + text.substring(end);
    contentTextarea.focus();
    updatePreview();
}

function insertList(type) {
    const start = contentTextarea.selectionStart;
    const text = contentTextarea.value;
    
    const newText = `<${type}>\n  <li>Item 1</li>\n  <li>Item 2</li>\n</${type}>\n`;
    contentTextarea.value = text.substring(0, start) + newText + text.substring(start);
    contentTextarea.focus();
    updatePreview();
}

function insertLink() {
    const url = prompt('Enter URL:', 'https://');
    if (url) {
        const start = contentTextarea.selectionStart;
        const end = contentTextarea.selectionEnd;
        const text = contentTextarea.value;
        const selected = text.substring(start, end) || 'Link text';
        
        const newText = `<a href="${url}">${selected}</a>`;
        contentTextarea.value = text.substring(0, start) + newText + text.substring(end);
        contentTextarea.focus();
        updatePreview();
    }
}

function insertImage() {
    const url = prompt('Enter image URL:', '/static/uploads/');
    if (url) {
        const alt = prompt('Enter alt text:', 'Image');
        const start = contentTextarea.selectionStart;
        const text = contentTextarea.value;
        
        const newText = `<img src="${url}" alt="${alt}" class="img-fluid">`;
        contentTextarea.value = text.substring(0, start) + newText + text.substring(start);
        contentTextarea.focus();
        updatePreview();
    }
}

function updatePreview() {
    const content = contentTextarea.value;
    if (content.trim()) {
        previewDiv.innerHTML = content;
    } else {
        previewDiv.innerHTML = '<em class="text-muted">Enter content to see preview...</em>';
    }
}

// Update preview on input
contentTextarea.addEventListener('input', updatePreview);

// Initial preview
updatePreview();
</script>
{% endblock %}