{% extends "frontend/base.html" %}
{% load i18n static %}
{% load partials %}
{% block html_title %}
    {% block page_title %}
        {% translate "Organization Details" %}
    {% endblock page_title %}
{% endblock html_title %}
{% partialdef org-name %}
<td>
    {{ form.instance.name }}
    {% if has_change_permission %}
        <button class="btn btn-primary"
                hx-get="{{ request.path }}?fragment=org-name-edit&hx-single-field=name"
                hx-target="closest td"
                hx-swap="outerHTML">{% translate "Edit" %}</button>
    {% endif %}
</td>
{% endpartialdef org-name %}
{% partialdef org-name-edit %}
<td>
    <form hx-target="closest td"
          hx-swap="outerHTML"
          hx-post="{{ request.url }}">
        <div class="d-flex align-items-baseline">
            {{ form.name.as_field_group }}
            <input type="hidden" name="hx-single-field" value="name">
            <input type="hidden" name="fragment" value="org-name">
            <button type="submit" class="btn btn-primary mx-1">{% translate "Save" %}</button>
            <button type="button"
                    class="btn btn-secondary"
                    hx-get="{{ request.path }}?fragment=org-name"
                    hx-target="closest td"
                    hx-swap="outerHTML">{% translate "Cancel" %}</button>
        </div>
    </form>
</td>
{% endpartialdef org-name-edit %}
{% partialdef members-list %}
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>{% translate "Name" %}</th>
                <th>{% translate "Email" %}</th>
                <th>{% translate "Role" %}</th>
                <th>{% translate "Joined" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for membership in memberships %}
                <tr>
                    <td>{{ membership.user }}</td>
                    <td>{{ membership.user.email }}</td>
                    <td>
                        <span class="badge bg-{% if membership.role == 'owner' %}primary{% elif membership.role == 'admin' %}info{% else %}secondary{% endif %}">
                            {{ membership.get_role_display }}
                        </span>
                    </td>
                    <td>{{ membership.date_joined|date:"Y-m-d" }}</td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="4" class="text-muted text-center">{% translate "No members yet" %}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endpartialdef members-list %}
{% partialdef pending-invitations-card %}
{% if pending_invitations %}
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <i class="bi bi-envelope"></i> {% translate "Pending Invitations" %}
            </h4>
        </div>
        <div class="card-content">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{% translate "Email" %}</th>
                                <th>{% translate "Role" %}</th>
                                <th>{% translate "Sent" %}</th>
                                <th>{% translate "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for invitation in pending_invitations %}
                                <tr>
                                    <td>{{ invitation.email }}</td>
                                    <td>
                                        <span class="badge bg-{% if invitation.role == 'owner' %}primary{% elif invitation.role == 'admin' %}info{% else %}secondary{% endif %}">
                                            {{ invitation.get_role_display }}
                                        </span>
                                    </td>
                                    <td>{{ invitation.created_at|date:"Y-m-d H:i" }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-secondary"
                                                onclick="navigator.clipboard.writeText('{{ request.scheme }}://{{ request.get_host }}{{ invitation.urls.accept }}'); this.textContent='Copied!'">
                                            <i class="bi bi-clipboard"></i> {% translate "Copy Link" %}
                                        </button>
                                        <form method="post"
                                              action="{{ invitation.urls.delete }}"
                                              style="display: inline"
                                              hx-post="{{ invitation.urls.delete }}"
                                              hx-target="#pending-invitations-card"
                                              hx-swap="outerHTML"
                                              hx-confirm="{% translate 'Are you sure you want to delete this invitation?' %}">
                                            {% csrf_token %}
                                            <input type="hidden" name="fragment" value="pending-invitations-card">
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-trash"></i> {% translate "Delete" %}
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endpartialdef pending-invitations-card %}
{% block content %}
    <section class="section">
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-lg">
                            <tbody>
                                <tr>
                                    <th class="w-25">
                                        <span class="d-flex mt-2">{% translate "Name" %}</span>
                                    </th>
                                    {% partial org-name %}
                                </tr>
                                <tr>
                                    <th class="w-25">
                                        <span class="d-flex mt-2">{% translate "Namespace" %}</span>
                                    </th>
                                    <td>
                                        <div>{{ form.instance.namespace }}</div>
                                        <small class="text-muted">{% translate "System-generated namespace for Kubernetes resources." %}</small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% if not form.instance.origin.hide_billing_address %}
            {% if form.instance.billing_entity and form.instance.billing_entity.odoo_data.invoice_address %}
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{% translate "Billing Address" %}</h4>
                        {% if form.instance.has_inherited_billing_entity %}
                            <p class="text-muted">
                                <small>{% translate "This billing address cannot be modified." %}</small>
                            </p>
                        {% endif %}
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            {% with odoo_data=form.instance.billing_entity.odoo_data %}
                                <div class="table-responsive">
                                    <table class="table table-lg">
                                        <tbody>
                                            {% if odoo_data.invoice_address %}
                                                <tr>
                                                    <th class="w-25">
                                                        <span class="d-flex mt-2">{% translate "Invoice Contact Name" %}</span>
                                                    </th>
                                                    <td>{{ odoo_data.invoice_address.name|default:"" }}</td>
                                                </tr>
                                                <tr>
                                                    <tr>
                                                        <th class="w-25">
                                                            <span class="d-flex mt-2">{% translate "Street" %}</span>
                                                        </th>
                                                        <td>{{ odoo_data.invoice_address.street|default:"" }}</td>
                                                    </tr>
                                                    {% if odoo_data.invoice_address.street2 %}
                                                        <tr>
                                                            <th class="w-25">
                                                                <span class="d-flex mt-2">{% translate "Street 2" %}</span>
                                                            </th>
                                                            <td>{{ odoo_data.invoice_address.street2 }}</td>
                                                        </tr>
                                                    {% endif %}
                                                    <tr>
                                                        <th class="w-25">
                                                            <span class="d-flex mt-2">{% translate "City" %}</span>
                                                        </th>
                                                        <td>{{ odoo_data.invoice_address.city|default:"" }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">
                                                            <span class="d-flex mt-2">{% translate "ZIP Code" %}</span>
                                                        </th>
                                                        <td>{{ odoo_data.invoice_address.zip|default:"" }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">
                                                            <span class="d-flex mt-2">{% translate "Country" %}</span>
                                                        </th>
                                                        <td>{{ odoo_data.invoice_address.country_id.1|default:"" }}</td>
                                                    </tr>
                                                    <th class="w-25">
                                                        <span class="d-flex mt-2">{% translate "Invoice Email" %}</span>
                                                    </th>
                                                    <td>{{ odoo_data.invoice_address.email|default:"" }}</td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endwith %}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% elif form.instance.origin.billing_message %}
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{% translate "Billing Information" %}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <p>{{ form.instance.origin.billing_message }}</p>
                    </div>
                </div>
            </div>
        {% endif %}
        {% if can_manage_members %}
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="bi bi-people"></i> {% translate "Members" %}
                    </h4>
                </div>
                <div class="card-content">
                    <div class="card-body">{% partial members-list %}</div>
                </div>
            </div>
            <div id="pending-invitations-card">{% partial pending-invitations-card %}</div>
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="bi bi-person-plus"></i> {% translate "Invite New Member" %}
                    </h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="alert alert-light mb-3">
                            <h6>
                                <i class="bi bi-info-circle"></i> {% translate "Role Permissions" %}
                            </h6>
                            <ul class="mb-0">
                                <li>
                                    <strong>{% translate "Owner" %}:</strong> {% translate "Can manage all organization settings, members, services, and can appoint administrators." %}
                                </li>
                                <li>
                                    <strong>{% translate "Administrator" %}:</strong> {% translate "Can manage members, invite users, and manage all services and instances." %}
                                </li>
                                <li>
                                    <strong>{% translate "Member" %}:</strong> {% translate "Can view organization details, create and manage their own service instances." %}
                                </li>
                            </ul>
                        </div>
                        <form method="post" class="form">
                            {% csrf_token %}
                            <div class="row">{{ invitation_form }}</div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary" name="invite_email" value="1">
                                        <i class="bi bi-send"></i> {% translate "Send Invitation" %}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        {% endif %}
    </section>
{% endblock content %}
