{% extends "base.html" %}

{% block title %}{{ bookmark.title|default:bookmark.url }} - Knowledge Base{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'home' %}">My Bookmarks</a></li>
    <li class="breadcrumb-item active" aria-current="page">Details</li>
  </ol>
</nav>

<div class="row">
    <div class="col-md-8">
        <div class="card p-4 mb-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <h1 class="h2">{{ bookmark.title|default:bookmark.url }}</h1>
                {% if bookmark.user == request.user %}
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="dropdown">
                            <i class="bi bi-three-dots"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'bookmark-edit' bookmark.pk %}">Edit</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{% url 'bookmark-delete' bookmark.pk %}" method="post" onsubmit="return confirm('Are you sure?');">
                                    {% csrf_token %}
                                    <button type="submit" class="dropdown-item text-danger">Delete</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                {% endif %}
            </div>
            
            <p class="text-muted mb-4">
                <i class="bi bi-link-45deg"></i> <a href="{{ bookmark.url }}" target="_blank" class="text-break">{{ bookmark.url }}</a>
            </p>

            {% if bookmark.notes %}
                <div class="mb-4">
                    <h5 class="text-uppercase small fw-bold text-muted mb-2">My Notes</h5>
                    <div class="p-3 bg-light rounded border-start border-4 border-primary">
                        {{ bookmark.notes|linebreaks }}
                    </div>
                </div>
            {% endif %}

            {% if bookmark.summary %}
                <div class="mb-4">
                    <h5 class="text-uppercase small fw-bold text-muted mb-2">AI Summary</h5>
                    <div class="p-3 border rounded shadow-sm bg-white">
                        {{ bookmark.summary.content }}
                    </div>
                </div>
            {% else %}
                <div class="alert alert-light border text-center small py-3">
                    <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
                    AI Summary is being generated...
                </div>
            {% endif %}

            <div class="mt-4">
                {% for tag in bookmark.tags.all %}
                    <span class="badge bg-light text-dark border p-2 me-1">#{{ tag.name }}</span>
                {% endfor %}
            </div>
        </div>

        {% if bookmark.extraction %}
            <div class="card p-4">
                <h5 class="text-uppercase small fw-bold text-muted mb-3">Extracted Text Content</h5>
                <div class="extraction-content text-muted small" style="max-height: 500px; overflow-y: auto;">
                    {{ bookmark.extraction.content_text|linebreaks }}
                </div>
            </div>
        {% endif %}
    </div>

    <div class="col-md-4">
        {% if bookmark.user == request.user %}
        <div class="card p-4 mb-4">
            <h5 class="h6 mb-3">Share with Teams</h5>
            <div class="list-group list-group-flush">
                {% for team in user.teams.all %}
                <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                    <div>
                        <div class="fw-bold">{{ team.name }}</div>
                        <div class="small text-muted">{{ team.members.count }} members</div>
                    </div>
                    <button class="btn btn-sm btn-outline-primary share-toggle" 
                            data-url="{% url 'bookmark-share-toggle' bookmark.pk team.pk %}"
                            data-team-id="{{ team.pk }}">
                        {% with shared=False %}
                            {% for share in bookmark.shares.all %}
                                {% if share.team == team %}{% with shared=True %}Shared{% endwith %}{% endif %}
                            {% endfor %}
                            {% if not shared %}Share{% endif %}
                        {% endwith %}
                    </button>
                </div>
                {% empty %}
                <p class="small text-muted mb-0">You are not a member of any teams. <a href="{% url 'team-list' %}">Explore teams</a>.</p>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div class="card p-4">
            <h5 class="h6 mb-3">Information</h5>
            <ul class="list-unstyled small mb-0">
                <li class="mb-2"><span class="text-muted">Saved on:</span> {{ bookmark.created_at|date:"F d, Y H:i" }}</li>
                <li class="mb-2"><span class="text-muted">Last updated:</span> {{ bookmark.updated_at|date:"F d, Y H:i" }}</li>
                <li><span class="text-muted">Saved by:</span> {{ bookmark.user.username }}</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.querySelectorAll('.share-toggle').forEach(button => {
    button.addEventListener('click', async function() {
        const url = this.getAttribute('data-url');
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            }
        });
        const data = await response.json();
        if (data.shared) {
            this.textContent = 'Shared';
            this.classList.remove('btn-outline-primary');
            this.classList.add('btn-primary');
        } else {
            this.textContent = 'Share';
            this.classList.remove('btn-primary');
            this.classList.add('btn-outline-primary');
        }
    });
});
</script>
{% endblock %}