{% extends 'base.html' %}{% load static %}
{% block title %}{{ page_title }}{% endblock %}
{% block content %}<div class="operations-page operations-contact-form" data-location-picker data-locations-url="{% static 'data/iran-locations.json' %}">
<section class="operations-hero"><div><p class="eyebrow">پرونده ارتباطی</p><h1>{{ form_title }}</h1><p>{{ form_help }}</p></div><div class="operations-hero-actions">{% if call_customer %}{% include 'tickets/_voip_call_button.html' with customer=call_customer %}{% endif %}<a class="button button-secondary" href="{% url 'staff_tickets:contacts' %}">بازگشت به مخاطبان</a></div></section>
<form method="post" class="contact-editor" data-disable-on-submit>{% csrf_token %}
  {% if form.non_field_errors %}<div class="create-form-errors" role="alert">{{ form.non_field_errors }}</div>{% endif %}
  <section class="editor-section"><header><span>۱</span><div><h2>هویت و راه ارتباطی</h2><p>اطلاعات پایه مخاطب برای شناسایی و ارسال پیامک</p></div></header><div class="editor-grid"><label><span>{{ form.mobile.label }} <em>*</em></span>{{ form.mobile }}{{ form.mobile.errors }}<small>شماره معتبر به شکل 09xxxxxxxxx</small></label><label><span>{{ form.stakeholder_type.label }} <em>*</em></span>{{ form.stakeholder_type }}{{ form.stakeholder_type.errors }}</label><label><span>{{ form.first_name.label }} <em>*</em></span>{{ form.first_name }}{{ form.first_name.errors }}</label><label><span>{{ form.last_name.label }}</span>{{ form.last_name }}{{ form.last_name.errors }}</label><label class="editor-wide"><span>{{ form.organization_name.label }}</span>{{ form.organization_name }}{{ form.organization_name.errors }}</label></div></section>
  <section class="editor-section"><header><span>۲</span><div><h2>موقعیت جغرافیایی</h2><p>استان و شهر را از پایگاه مکان‌های ایران انتخاب کنید</p></div></header><div class="editor-grid"><label><span>{{ form.province.label }}</span>{{ form.province }}{{ form.province.errors }}</label><label><span>{{ form.city.label }}</span>{{ form.city }}{{ form.city.errors }}</label></div><p class="location-status" data-location-hint>برای نمایش شهرها، ابتدا استان را انتخاب کنید.</p></section>
  <section class="editor-section"><header><span>۳</span><div><h2>گروه‌بندی</h2><p>عضویت مخاطب در گروه‌های قابل مدیریت را اضافه یا حذف کنید</p></div></header><fieldset class="group-selector" data-contact-group-selector><legend>{{ form.groups.label }}</legend><div class="group-selector-tools"><label><span class="sr-only">جست‌وجوی گروه</span><input type="search" placeholder="جست‌وجوی نام گروه یا واحد…" autocomplete="off" data-group-search></label><span class="group-selection-count" data-group-selection-count aria-live="polite">۰ گروه انتخاب شده</span><button type="button" data-clear-groups>پاک‌کردن انتخاب‌ها</button></div><div class="group-choice-list">{{ form.groups }}</div>{{ form.groups.errors }}<small>{{ form.groups.help_text }}</small><p class="group-empty" data-group-empty hidden>گروهی با این عبارت پیدا نشد.</p></fieldset></section>
  <footer class="editor-actions"><button type="submit">ذخیره مخاطب</button><a href="{% url 'staff_tickets:contacts' %}">انصراف</a><span>اطلاعات ورود یا رمز عبور برای مخاطب ساخته نمی‌شود.</span></footer>
</form>
{% if call_customer %}
<section class="operations-panel contact-history" aria-labelledby="contact-history-title">
  <header class="contact-history__heading">
    <span class="contact-history__heading-icon" aria-hidden="true">↺</span>
    <div>
      <h2 id="contact-history-title">سابقه ویرایش</h2>
      <p>تغییرات ثبت‌شده این مخاطب، از جدیدترین به قدیمی‌ترین</p>
    </div>
    <span class="contact-history__total">{{ contact_edit_logs|length }} رویداد اخیر</span>
  </header>
  <ol class="contact-history__timeline">
    {% for entry in contact_edit_logs %}
    <li class="contact-history__event">
      <details class="contact-history__details" {% if forloop.first %}open{% endif %}>
        <summary class="contact-history__summary">
          <span class="contact-history__avatar" aria-hidden="true">{{ entry.actor_name|slice:":1" }}</span>
          <span class="contact-history__identity">
            <strong>{{ entry.actor_name }}</strong>
            <time datetime="{{ entry.created_at|date:'c' }}">{{ entry.created_at|date:"Y/m/d H:i" }}</time>
          </span>
          <span class="contact-history__count">{{ entry.changes|length }} تغییر</span>
          <span class="contact-history__chevron" aria-hidden="true"></span>
        </summary>
        <ul class="contact-history__changes">
          {% for change in entry.changes %}
          <li class="contact-history__change">
            <strong class="contact-history__field">{{ change.field }}</strong>
            <div class="contact-history__values">
              <div class="contact-history__value contact-history__value--before"><span>قبل</span><b dir="auto">{{ change.before|default:"خالی" }}</b></div>
              <span class="contact-history__arrow" aria-hidden="true">←</span>
              <div class="contact-history__value contact-history__value--after"><span>بعد</span><b dir="auto">{{ change.after|default:"خالی" }}</b></div>
            </div>
          </li>
          {% endfor %}
        </ul>
      </details>
    </li>
    {% empty %}
    <li class="contact-history__empty"><span aria-hidden="true">↺</span><strong>هنوز ویرایشی ثبت نشده است</strong><p>پس از تغییر اطلاعات مخاطب، جزئیات آن در اینجا نمایش داده می‌شود.</p></li>
    {% endfor %}
  </ol>
</section>
{% endif %}</div>{% endblock %}
{% block extra_scripts %}<script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/contact-group-selector.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/voip-call.js' %}?v={{ static_asset_version }}"></script>{% endblock %}