{% extends "layout.html" %}

{% block content %}
<div class="row mb-3">
    <div class="col-md-8">
        <h2><i class="bi bi-share"></i> Share Document: {{ document.original_filename }}</h2>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('view_document', document_id=document.id) }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Document
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-person-plus"></i> Share with User</h5>
            </div>
            <div class="card-body">
                <form method="post" action="{{ url_for('share_document', document_id=document.id) }}">
                    <input type="hidden" name="share_type" value="user">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <select class="form-select" id="username" name="username" required>
                            <option value="" selected disabled>Select a user</option>
                            {% for user in users %}
                            <option value="{{ user.username }}">{{ user.username }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-share"></i> Share with User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-link"></i> Create Shareable Link</h5>
            </div>
            <div class="card-body">
                <form method="post" action="{{ url_for('share_document', document_id=document.id) }}">
                    <input type="hidden" name="share_type" value="link">
                    <div class="mb-3">
                        <label for="expiry" class="form-label">Link Expiry</label>
                        <select class="form-select" id="expiry" name="expiry">
                            <option value="1">1 day</option>
                            <option value="7" selected>7 days</option>
                            <option value="30">30 days</option>
                            <option value="90">90 days</option>
                        </select>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-info">
                            <i class="bi bi-link"></i> Generate Link
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="bi bi-people"></i> Current Shares</h5>
    </div>
    <div class="card-body">
        {% if shares %}
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Shared With</th>
                        <th>Date Shared</th>
                        <th>Expiry</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for share in shares %}
                    <tr>
                        <td>
                            {% if share.shared_with %}
                            <span class="badge bg-primary"><i class="bi bi-person"></i> User</span>
                            {% elif share.share_link %}
                            <span class="badge bg-info"><i class="bi bi-link"></i> Link</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if share.shared_with %}
                            {{ share.username }}
                            {% elif share.share_link %}
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control form-control-sm" value="{{ request.host_url }}shared/{{ share.share_link }}" readonly id="link-{{ share.id }}">
                                <button class="btn btn-outline-secondary" type="button" onclick="copyLink('link-{{ share.id }}')">
                                    <i class="bi bi-clipboard"></i>
                                </button>
                            </div>
                            {% endif %}
                        </td>
                        <td>{{ share.created_at.split(' ')[0] }}</td>
                        <td>
                            {% if share.expires_at %}
                            {{ share.expires_at.split(' ')[0] }}
                            {% else %}
                            Never
                            {% endif %}
                        </td>
                        <td>
                            <a href="#" class="btn btn-sm btn-danger">
                                <i class="bi bi-x-circle"></i> Revoke
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> This document hasn't been shared yet.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function copyLink(elementId) {
        var copyText = document.getElementById(elementId);
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        navigator.clipboard.writeText(copyText.value);
        
        // Show a temporary tooltip
        var tooltip = document.createElement("div");
        tooltip.innerHTML = "Copied!";
        tooltip.style.position = "fixed";
        tooltip.style.backgroundColor = "#4CAF50";
        tooltip.style.color = "white";
        tooltip.style.padding = "5px 10px";
        tooltip.style.borderRadius = "5px";
        tooltip.style.zIndex = "1000";
        tooltip.style.top = (event.clientY - 30) + "px";
        tooltip.style.left = event.clientX + "px";
        document.body.appendChild(tooltip);
        
        setTimeout(function() {
            document.body.removeChild(tooltip);
        }, 2000);
    }
</script>
{% endblock %}