{% extends "base.html" %}
{% block title %}{{ package.name }}{% endblock %}
{% block content %}
<h1>{{ package.name }}</h1>

<div class="pkg-meta">
    <span>Owner: <strong>{{ package.owner.email if package.owner else 'unknown' }}</strong></span>
    {% if package.blocked %}<span><span class="badge badge-blocked">blocked</span></span>{% endif %}
    {% if package.quarantined %}<span><span class="badge badge-suspended">quarantined</span></span>{% endif %}
</div>

<div class="btn-group mb-2">
    <a href="/report/{{ package.name }}" class="btn btn-outline btn-sm">⚠ Report</a>
</div>

{% if role in ('owner', 'maintainer') %}
<div class="btn-group mb-2">
    <a href="/package/{{ package.name }}/unpublish" class="btn btn-danger btn-sm">Unpublish</a>
</div>
{% endif %}

<div class="card">
    <div class="card-header">
        <h2>Versions</h2>
    </div>
    {% if versions %}
    <table>
        <thead>
            <tr><th>Version</th><th>Checksum</th><th>Requires</th></tr>
        </thead>
        <tbody>
        {% for v in versions %}
            <tr>
                <td data-label="Version"><strong>{{ v.version }}</strong></td>
                <td data-label="Checksum"><code>{{ v.checksum[:20] }}...</code></td>
                <td data-label="Requires">{{ v.requires | join(', ') }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty"><p>No versions published.</p></div>
    {% endif %}
</div>

<div class="card">
    <div class="card-header">
        <h2>Members</h2>
    </div>
    {% if members %}
    <table>
        <thead>
            <tr><th>Email</th><th>Role</th><th></th></tr>
        </thead>
        <tbody>
        {% for m in members %}
            <tr>
                <td data-label="Email">{{ m.email }}</td>
                <td data-label="Role">
                    {% if m.role == 'owner' %}<span class="badge badge-owner">owner</span>
                    {% elif m.role == 'maintainer' %}<span class="badge badge-maintainer">maintainer</span>
                    {% else %}<span class="badge badge-viewer">viewer</span>{% endif %}
                </td>
                <td>
                    {% if role == 'owner' and m.role != 'owner' %}
                    <form method="POST" action="/package/{{ package.name }}/remove-member" style="display:inline">
                        <input type="hidden" name="user_id" value="{{ m.user_id }}">
                        <button type="submit" class="btn btn-outline btn-sm">Remove</button>
                    </form>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty"><p>No members added.</p></div>
    {% endif %}

    {% if role == 'owner' %}
    <div class="mt-2">
        <h3>Add Member</h3>
        <form method="POST" action="/package/{{ package.name }}/add-member" style="display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap;">
            <label style="margin:0; flex:1; min-width:200px;">
                Email
                <input type="email" name="email" required placeholder="user@example.com">
            </label>
            <label style="margin:0; width:140px;">
                Role
                <select name="role">
                    <option value="maintainer">Maintainer</option>
                    <option value="viewer">Viewer</option>
                </select>
            </label>
            <button type="submit" class="btn btn-primary" style="margin-top: auto;">Add</button>
        </form>
    </div>
    {% endif %}
</div>
{% endblock %}