{% extends 'base.html' %}{% load static jalali %}
{% block title %}{{ page_title }}{% endblock %}
{% block content %}
{% if magic_link_access %}<div class="flash" role="status">شما از طریق لینک امن، فقط به همین تیکت دسترسی دارید. برای مشاهده سایر درخواست‌ها و پروفایل، با شماره موبایل خود وارد شوید.</div>{% endif %}
<div class="ticket-workspace customer-workspace{% if magic_link_access %} has-ticket-detail-credit{% endif %}" data-conversation-workspace data-poll-url="{% url 'tickets:poll' ticket.public_id %}" data-read-url="{% url 'tickets:read' ticket.public_id %}" data-poll-version="{{ poll_version }}" data-poll-cursor="{{ poll_cursor }}" data-draft-key="ticket-{{ ticket.public_id }}-customer" data-reply-result="{{ request.GET.reply_result|default:'' }}">
  <header class="ticket-workspace-head"><div class="ticket-title"><a class="workspace-back" href="{% if magic_link_access %}{% url 'accounts:login' %}{% else %}{% url 'tickets:list' %}{% endif %}" aria-label="بازگشت">→</a><div><span class="ticket-number" dir="ltr">{{ ticket.ticket_number }}</span><h1>{{ ticket.subject }}</h1></div></div><div class="ticket-head-actions"><span class="badge" data-ticket-status>{{ ticket.get_status_display }}</span><button type="button" class="icon-button" data-toggle-panel="ticket-info" aria-label="جزئیات تیکت">ⓘ</button></div></header>
  <div class="workspace-grid customer-grid">
    <main class="conversation-pane">
      <section class="conversation-toolbar"><div><b>{% if ticket.group_dispatch %}{{ ticket.group_dispatch.get_operation_type_display }}{% else %}سوابق مکاتبات تیکت{% endif %}</b>{% if ticket.group_dispatch.response_control.mode == 'SEALED' and not ticket.group_dispatch.response_control.opened_at %}<small role="status">پاسخ شما تا بازگشایی برای کارکنان محرمانه است.</small>{% endif %}</div><small><span data-conversation-count>{{ conversation|length }}</span> مکاتبه</small></section>
      <section class="conversation" data-conversation role="log" aria-live="polite" aria-label="مکاتبات تیکت">{% if has_older %}<button class="load-older" type="button" data-load-older hx-get="{% url 'tickets:messages' ticket.public_id %}?before={{ older_cursor }}" hx-target="this" hx-swap="outerHTML">↑ نمایش مکاتبات قدیمی‌تر</button>{% endif %}{% include 'tickets/_messages.html' %}<div class="conversation-end" data-conversation-end aria-hidden="true"></div></section>
      <button class="new-message-jump" type="button" data-jump-latest hidden>↓ رفتن به آخرین مکاتبه</button>
      <section class="composer {% if request.GET.reply_result != 'error' %}is-collapsed{% endif %}" data-composer-shell>
        <button type="button" class="composer-launch" data-composer-toggle aria-expanded="false"><span class="composer-launch-icon">＋</span><span><b>ثبت پاسخ جدید</b><small>برای افزودن توضیحات یا مستندات به این تیکت</small></span><span class="composer-launch-arrow">↑</span></button>
        <form method="post" enctype="multipart/form-data" data-ticket-composer data-chat-coach data-chat-coach-key="ticket-{{ ticket.public_id }}-customer" action="{% url 'tickets:reply' ticket.public_id %}">{% csrf_token %}
          <div class="composer-context"><div><b>ثبت پاسخ تکمیلی در تیکت</b></div></div>
          <div class="composer-input-row"><div class="composer-editor">{{ form.body }}{{ form.body.errors }}<span class="composer-draft-status" data-draft-status></span></div><span class="composer-send-icon" role="button" tabindex="0" data-scroll-to-submit aria-label="رفتن به دکمه ثبت پاسخ" title="رفتن به دکمه ثبت پاسخ"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 20.5 21 12 3 3.5v6.6l12 1.9-12 1.9z"/></svg></span></div>
          <div class="reply-media-picker"><div class="media-picker-actions"><label class="media-picker-button gallery-button" for="customer-reply-gallery"><span class="media-picker-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5h3l1.2-1.5h7.6L17 5h3a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm8 3.2a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 0 0 0-8.8Z"/></svg></span><span>انتخاب عکس از گالری</span></label><label class="media-picker-button" for="customer-reply-file"><span class="media-picker-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M8.5 12.8 14.8 6.5a3 3 0 1 1 4.2 4.2l-8.5 8.5a5 5 0 0 1-7.1-7.1l8-8 1.4 1.4-8 8a3 3 0 1 0 4.3 4.3l8.5-8.5a1 1 0 0 0-1.4-1.4l-6.4 6.3a1 1 0 0 0 1.4 1.5l5.7-5.7 1.4 1.4-5.7 5.7a3 3 0 1 1-4.2-4.3Z"/></svg></span><span>انتخاب فایل</span></label></div><input id="customer-reply-gallery" type="file" accept="image/*" multiple data-gallery-input><input id="customer-reply-file" type="file" multiple data-document-input><span class="canonical-files">{{ form.files }}</span>{{ form.files.errors }}<small class="compression-note" data-compression-status>تصاویر بزرگ پیش از ارسال بهینه می‌شوند.</small></div>
          <div class="file-preview" data-file-preview></div>
          <div class="voice-recorder compact-recorder" data-voice-recorder hidden><div class="voice-head"><b>ضبط پیام صوتی</b><span class="badge" data-timer>00:00</span></div><div class="voice-actions"><button type="button" data-record>● شروع ضبط</button><button type="button" data-pause disabled>مکث</button><button type="button" data-stop disabled>توقف</button><button type="button" class="ghost" data-delete hidden>حذف</button></div><audio controls hidden></audio></div>
          <div class="composer-bar"><div class="composer-tools"><button class="tool-button" type="button" data-toggle-recorder title="افزودن توضیح صوتی">●<span>توضیح صوتی</span></button><button class="tool-button composer-close" type="button" data-composer-close>بستن</button></div><small class="composer-hint">پیش از ثبت، متن و پیوست‌ها را بازبینی کنید.</small><button class="send-button" type="submit" data-primary-submit>ثبت پاسخ در تیکت <span>←</span></button></div>
        </form>
      </section>
    </main>
    <aside class="workspace-side" id="ticket-info" data-workspace-panel><button type="button" class="panel-close" data-close-panel aria-label="بستن">×</button><section class="info-card"><p class="panel-index">جزئیات تیکت</p><div class="info-list"><div class="info-row"><span>دسته‌بندی</span><b>{{ ticket.category }}</b></div><div class="info-row"><span>موقعیت</span><b>{% if ticket.city %}{{ ticket.city }}، {{ ticket.province }}{% elif ticket.province %}{{ ticket.province }}{% else %}ثبت نشده{% endif %}</b></div><div class="info-row"><span>کارشناس</span><b>{{ ticket.assigned_expert_name }}</b></div><div class="info-row"><span>آخرین فعالیت</span><b>{{ ticket.last_activity_at|jalali_datetime }}</b></div></div></section><section class="info-card">{% if magic_link_access %}<h3>مشاهده همه درخواست‌ها</h3><p class="muted mt-2">برای دسترسی به پروفایل و سایر درخواست‌ها، ابتدا با شماره موبایل خود وارد شوید.</p><a class="back-link mt-3" href="{% url 'accounts:login' %}">ورود با شماره موبایل ←</a>{% else %}<h3>موضوع دیگری دارید؟</h3><p class="muted mt-2">برای هر موضوع یک درخواست جدا بسازید تا پیگیری منظم بماند.</p><a class="back-link mt-3" href="{% url 'tickets:new' %}">ثبت درخواست تازه ←</a>{% endif %}</section></aside>
  </div>
  {% if magic_link_access %}<footer class="ticket-detail-credit">{{ developer_credit }}</footer>{% endif %}
</div>
{% include 'tickets/_image_viewer.html' %}
<script src="{% static 'js/conversation-read.js' %}?v={{ static_asset_version }}"></script>
<script src="{% static 'vendor/compressor.min.js' %}?v={{ static_asset_version }}"></script><script src="{% static 'js/attachment-uploader.js' %}?v={{ static_asset_version }}"></script><script src="{% static 'js/image-viewer.js' %}?v={{ static_asset_version }}"></script><script src="{% static 'js/conversation.js' %}?v={{ static_asset_version }}"></script>
{% endblock %}
{% block footer %}{% endblock %}