{% extends "base.html" %}

{% block title %}{{ organization.name }} — Hamsoo Identity{% endblock %}

{% block content %}
<div class="card">
  <h1>{{ organization.name }}</h1>
  <p class="sub">
    شناسه: <span style="font-family:monospace;">{{ organization.slug }}</span>
    &nbsp;·&nbsp; {{ members|length }} عضو
  </p>

  {% for error in errors %}<div class="error">{{ error }}</div>{% endfor %}

  {% if can_manage %}
    <h2 style="margin-top:24px;">افزودن عضو</h2>
    <form method="post">
      {% csrf_token %}
      <input type="hidden" name="action" value="add_member" />
      <label for="member-email">ایمیل کاربر</label>
      <input id="member-email" name="email" type="email" required />
      <label for="member-role">نقش</label>
      <select id="member-role" name="role">
        <option value="member">عضو</option>
        <option value="admin">مدیر</option>
        <option value="owner">مالک</option>
      </select>
      <button type="submit">افزودن</button>
    </form>
  {% endif %}
</div>

<div class="card" style="margin-top:20px;">
  <h2>اعضا</h2>
  {% if members %}
    <table>
      <thead>
        <tr><th>نام</th><th>ایمیل</th><th>نقش</th><th>وضعیت</th>{% if can_manage %}<th></th>{% endif %}</tr>
      </thead>
      <tbody>
        {% for membership in members %}
          <tr>
            <td>{{ membership.user.full_name|default:membership.user.username|default:membership.user.email }}</td>
            <td>{{ membership.user.email }}</td>
            <td>
              {% if can_manage %}
                <form method="post" style="display:flex; gap:6px; margin:0;">
                  {% csrf_token %}
                  <input type="hidden" name="action" value="change_role" />
                  <input type="hidden" name="membership_id" value="{{ membership.id }}" />
                  <select name="role" style="margin:0; padding:6px; font-size:12px;">
                    {% for value, label in roles %}
                      <option value="{{ value }}" {% if membership.role == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                  </select>
                  <button type="submit" class="btn ghost" style="margin:0; padding:6px 10px; font-size:12px;">ذخیره</button>
                </form>
              {% else %}
                {% if membership.role == "owner" %}مالک{% elif membership.role == "admin" %}مدیر{% else %}عضو{% endif %}
              {% endif %}
            </td>
            <td>{{ membership.status }}</td>
            {% if can_manage %}
              <td>
                <form method="post" style="margin:0;">
                  {% csrf_token %}
                  <input type="hidden" name="action" value="remove_member" />
                  <input type="hidden" name="membership_id" value="{{ membership.id }}" />
                  <button type="submit" class="btn ghost" style="margin:0; padding:6px 10px; font-size:12px; border-color:#b42318; color:#b42318;">حذف</button>
                </form>
              </td>
            {% endif %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="sub">هنوز عضوی ثبت نشده است.</p>
  {% endif %}
</div>

<p class="sub" style="margin-top:16px;">
  <a href="{% url 'account-organizations' %}">بازگشت به کسب‌وکارها</a>
</p>
{% endblock %}