{% extends "base.html" %}

{% block title %}Content Library - {{ lab_name }}{% endblock %}

{% block content %}
<div class="card">
    <div
        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
        <h1 style="color: var(--primary);">Content Library</h1>
        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
            <select onchange="filterByGroup(this.value)" class="form-control" style="width: auto; min-width: 200px;">
                <option value="">All Groups</option>
                {% for group in groups %}
                <option value="{{ group.id }}" {% if request.args.get('group_id')==group.id|string %}selected{% endif
                    %}>
                    {{ group.name }}
                </option>
                {% endfor %}
            </select>
            <a href="{{ url_for('upload_content_route') }}" class="btn btn-primary">Upload Content</a>
        </div>
    </div>

    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Filename</th>
                <th>Group</th>
                <th>Meeting</th>
                <th>Uploaded By</th>
                <th>Size</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for content in contents %}
            <tr>
                <td><strong>{{ content.title }}</strong></td>
                <td>{{ content.filename }}</td>
                <td>
                    {% if content.group_name %}
                    <span class="badge badge-user">{{ content.group_name }}</span>
                    {% else %}
                    <span style="color: var(--text-light);">-</span>
                    {% endif %}
                </td>
                <td>
                    {% if content.meeting_title %}
                    <a href="{{ url_for('meeting_detail', meeting_id=content.meeting_id) }}"
                        style="color: var(--primary); text-decoration: none;">
                        {{ content.meeting_title }}
                    </a>
                    {% else %}
                    <span style="color: var(--text-light);">-</span>
                    {% endif %}
                </td>
                <td>{{ content.uploaded_by_name }}</td>
                <td>{{ "%.2f"|format(content.file_size / 1024 / 1024) }} MB</td>
                <td>
                    <a href="{{ url_for('download_content', content_id=content.id) }}" class="btn btn-secondary"
                        style="padding: 0.5rem 1rem;">Download</a>
                    {% if session.is_admin or content.uploaded_by == session.user_id %}
                    <a href="{{ url_for('edit_content', content_id=content.id) }}" class="btn btn-primary"
                        style="padding: 0.5rem 1rem; margin-left: 0.5rem;">Edit</a>
                    <form method="POST" action="{{ url_for('delete_content_route', content_id=content.id) }}"
                        style="display: inline; margin-left: 0.5rem;"
                        onsubmit="return confirm('Are you sure you want to delete this content?');">
                        <button type="submit" class="btn btn-danger" style="padding: 0.5rem 1rem;">Delete</button>
                    </form>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    {% if not contents %}
    <p style="text-align: center; color: var(--text-light); padding: 2rem;">No content available.</p>
    {% endif %}
</div>

<script>
    function filterByGroup(groupId) {
        if (groupId) {
            window.location.href = '{{ url_for("content") }}?group_id=' + groupId;
        } else {
            window.location.href = '{{ url_for("content") }}';
        }
    }

</script>
{% endblock %}