{% extends "base.html" %}

{% block title %}{% if object %}Edit{% else %}Add{% endif %} Bookmark - Knowledge Base{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card p-4 shadow-sm border-0">
            <h2 class="mb-4">{% if object %}Edit{% else %}Add New{% endif %} Bookmark</h2>
            
            <form id="bookmark-form" method="post">
                {% csrf_token %}
                
                <div class="mb-3">
                    <label for="id_url" class="form-label">URL</label>
                    <input type="url" name="url" class="form-control form-control-lg" id="id_url" placeholder="https://example.com" value="{{ form.url.value|default:'' }}" required>
                    {% if form.url.errors %}<div class="text-danger small mt-1">{{ form.url.errors }}</div>{% endif %}
                </div>
                
                <div class="mb-3">
                    <label for="id_title" class="form-label">Title (Optional)</label>
                    <input type="text" name="title" class="form-control" id="id_title" placeholder="Leave blank to auto-extract" value="{{ form.title.value|default:'' }}">
                    <div class="form-text">We'll try to fetch the title automatically if you leave this blank.</div>
                </div>
                
                <div class="mb-3">
                    <label for="id_notes" class="form-label">Notes</label>
                    <textarea name="notes" class="form-control" id="id_notes" rows="3">{{ form.notes.value|default:'' }}</textarea>
                </div>
                
                <div class="mb-3">
                    <label for="tags_input" class="form-label">Tags</label>
                    <input type="text" name="tags_input" class="form-control" id="tags_input" placeholder="research, ai, deep-learning" value="{% for tag in object.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}">
                    <div class="form-text">Comma-separated tags.</div>
                </div>
                
                <div class="mb-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_favorite" id="id_is_favorite" {% if form.is_favorite.value %}checked{% endif %}>
                        <label class="form-check-label" for="id_is_favorite">Mark as Favorite</label>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between align-items-center">
                    <a href="{% url 'home' %}" class="btn btn-link text-muted">Cancel</a>
                    <button type="submit" id="submit-btn" class="btn btn-primary px-5 py-2 rounded-pill">
                        <span class="submit-text">{% if object %}Update{% else %}Save{% endif %} Bookmark</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('bookmark-form').addEventListener('submit', async function(e) {
        // We only use AJAX for ADDING bookmarks to ensure "immediate" return
        {% if not object %}
        e.preventDefault();
        
        const form = this;
        const submitBtn = document.getElementById('submit-btn');
        const submitText = submitBtn.querySelector('.submit-text');
        const spinner = submitBtn.querySelector('.spinner-border');
        
        // Show loading state
        submitBtn.disabled = true;
        submitText.classList.add('d-none');
        spinner.classList.remove('d-none');
        
        try {
            const formData = new FormData(form);
            const response = await fetch(window.location.href, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            if (response.ok) {
                const data = await response.json();
                if (data.status === 'success' && data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else {
                    // If not success, re-submit normally to show Django errors
                    form.submit();
                }
            } else if (response.redirected) {
                window.location.href = response.url;
            } else {
                form.submit();
            }
        } catch (error) {
            console.error('Error submitting form:', error);
            form.submit();
        }
        {% endif %}
    });
</script>
{% endblock %}