{% extends "base.html" %}
{% block title %}Join Workspace — Memlord{% endblock %}
{% block content %}

<div class="detail-card" style="max-width:480px;margin:2rem auto">
    <h1 class="page-title" style="margin-bottom:.5rem">Join workspace</h1>

    {% if used %}
    <div class="alert alert-error" style="margin-top:1rem">
        This invite link has already been used.
    </div>
    <a href="/ui/workspaces" class="btn btn-ghost btn-sm" style="margin-top:.75rem">My workspaces</a>
    {% else %}
    <p style="font-size:.875rem;color:var(--text-3);margin:1rem 0">
        <strong>{{ inviter_name }}</strong> invited you to join
        <strong>{{ workspace_name }}</strong>
        as <strong>{{ 'read only' if role == 'viewer' else 'read &amp; write' }}</strong>.
    </p>
    <div x-data="joinPage('{{ token }}')">
        <div x-show="error" class="alert alert-error" x-text="error" style="margin-bottom:.75rem"></div>
        <div class="form-actions">
            <button class="btn btn-primary" @click="accept()">Accept invitation</button>
            <a href="/" class="btn btn-ghost">Decline</a>
        </div>
    </div>
    <script>
    function joinPage(token) {
        return {
            error: '',
            async accept() {
                const r = await fetch('/api/workspaces/join/' + token, { method: 'POST' });
                if (r.ok) {
                    window.location.href = '/ui/workspaces/' + (await r.json()).id;
                } else {
                    this.error = (await r.json()).detail;
                }
            },
        };
    }
    </script>
    {% endif %}
</div>

{% endblock %}