{% extends "base.html" %}

{% block title %}Links - LinkSync{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Links</h1>
    <button class="btn btn-primary" id="new-link-btn">+ New Link</button>
</div>

<div class="search-bar">
    <div class="search-mode-toggle">
        <button class="btn btn-sm btn-outline search-mode-btn active" data-mode="simple" id="simple-search-btn">Simple</button>
        <button class="btn btn-sm btn-outline search-mode-btn" data-mode="query" id="query-search-btn">Query</button>
    </div>
    <input type="text" id="search-input" placeholder="Search links by title, URL, tags, or notes...">
    <input type="text" id="query-input" placeholder="e.g. personal AND lan NOT ai" style="display: none;">
    <button class="btn btn-secondary" id="search-btn">Search</button>
    <button class="btn btn-outline" id="save-collection-btn" title="Save current results as a collection">Save as Collection</button>
</div>

<div id="save-collection-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content modal-sm">
        <div class="modal-header">
            <h2>Save as Collection</h2>
            <button class="modal-close" id="save-collection-modal-close">&times;</button>
        </div>
        <form id="save-collection-form">
            <div class="form-group">
                <label for="save-collection-name">Collection Name *</label>
                <input type="text" id="save-collection-name" required>
            </div>
            <div class="form-group">
                <label for="save-collection-desc">Description</label>
                <textarea id="save-collection-desc" rows="2"></textarea>
            </div>
            <div class="form-group">
                <label for="save-collection-type">Type</label>
                <select id="save-collection-type">
                    <option value="static">Static (current results)</option>
                    <option value="dynamic">Dynamic (query-based)</option>
                </select>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" id="save-collection-public">
                    Public
                </label>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="save-collection-cancel-btn">Cancel</button>
                <button type="submit" class="btn btn-primary" id="save-collection-save-btn">Save</button>
            </div>
        </form>
    </div>
</div>

<div id="links-list" class="links-table">
    <div class="loading">Loading links...</div>
</div>

<div id="link-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modal-title">Add Link</h2>
            <button class="modal-close" id="modal-close">&times;</button>
        </div>
        <form id="link-form">
            <input type="hidden" id="link-id">
            <div class="form-group">
                <label for="link-url">URL *</label>
                <input type="url" id="link-url" required>
            </div>
            <div class="form-group">
                <label for="link-title">Title *</label>
                <input type="text" id="link-title" required>
            </div>
            <div class="form-group">
                <label for="link-description">Description</label>
                <textarea id="link-description" rows="2"></textarea>
            </div>
            <div class="form-group">
                <label for="link-notes">Notes</label>
                <textarea id="link-notes" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="link-tags">Tags (comma-separated)</label>
                <input type="text" id="link-tags" placeholder="tag1, tag2, tag3">
            </div>
            <div class="form-group">
                <label for="link-favicon">Favicon URL</label>
                <input type="url" id="link-favicon">
            </div>
            <div class="form-group">
                <label for="link-path">Path/Folder</label>
                <input type="text" id="link-path">
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="cancel-btn">Cancel</button>
                <button type="submit" class="btn btn-primary" id="save-btn">Save</button>
            </div>
        </form>
    </div>
</div>

<div id="delete-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content modal-sm">
        <h2>Delete Link</h2>
        <p>Are you sure you want to delete this link? This action cannot be undone.</p>
        <div class="form-actions">
            <button class="btn btn-secondary" id="delete-cancel-btn">Cancel</button>
            <button class="btn btn-danger" id="confirm-delete-btn">Delete</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/links-page.js?v={{ build_id }}"></script>
{% endblock %}