{% extends "base.html" %}
{% block title %}{{ ticket.ticket_number }} | {{ app_name }}{% endblock %}
{% block content %}
    <section class="content-grid two-column">
        <article class="panel">
            <div class="panel-header panel-header-inline">
                <div>
                    <p class="eyebrow">{{ ticket.ticket_number }}</p>
                    <h1>{{ ticket.title }}</h1>
                    <p>{{ ticket.description }}</p>
                    <div class="button-row">
                        {% if ticket.is_approved %}
                            <span class="status-chip" style="background-color:#148fdc;">{{ ltext('Approved / معتمدة') }}</span>
                        {% endif %}
                        {% if ticket.is_paid_ticket %}
                            <span class="priority-chip" style="color:#17a174;border-color:#17a174;">{{ ltext('Paid / مأجورة') }}{% if ticket.paid_amount is not none %} - {{ '%.2f'|format(ticket.paid_amount) }} {{ ticket.paid_currency }}{% endif %}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="button-row">
                    {% if ticket_permissions.can_edit_content %}
                        <a class="button button-secondary" href="{{ url_for('tickets.edit', ticket_id=ticket.id) }}">{{ t('edit') }}</a>
                    {% endif %}
                    {% if ticket_permissions.can_cancel %}
                        <form method="post" action="{{ url_for('tickets.cancel', ticket_id=ticket.id) }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="button button-danger" type="submit">{{ ltext('Cancel Ticket / إلغاء التذكرة') }}</button>
                        </form>
                    {% endif %}
                    <form method="post" action="{{ url_for('tickets.watch', ticket_id=ticket.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button class="button button-secondary" type="submit">{{ t('unwatch') if current_user in ticket.watchers else t('watch') }}</button>
                    </form>
                </div>
            </div>
            <div class="detail-grid">
                <article class="detail-card"><span>{{ ltext('Status / الحالة') }}</span><strong>{{ ticket.status.name if ticket.status else 'N/A'|ltext }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Priority / الأولوية') }}</span><strong>{{ ticket.priority.name if ticket.priority else 'N/A'|ltext }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Company / الشركة') }}</span><strong>{{ ticket.company.name if ticket.company else t('internal') }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Department / القسم') }}</span><strong>{{ ticket.department.name if ticket.department else t('unassigned') }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Assignee / المكلّف') }}</span><strong>{{ ticket.assigned_to.full_name if ticket.assigned_to else t('unassigned') }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Created By / أنشئت بواسطة') }}</span><strong>{{ ticket.created_by.full_name if ticket.created_by else t('system') }}</strong></article>
            </div>

            {% if ticket.is_approved %}
                <article class="detail-block">
                    <h2>{{ ltext('Approval / الاعتماد') }}</h2>
                    <p class="muted">
                        {{ ltext('This ticket is locked for general editing. Only admins can edit the full content. Status, internal notes, and attachments remain available. / هذه التذكرة مقفلة من التعديل العام. فقط الأدمن يمكنه تعديل كامل المحتوى. تبقى الحالة والملاحظات الداخلية والمرفقات متاحة.') }}
                    </p>
                    {% if ticket.approval_notes %}
                        <p><strong>{{ ltext('Notes / ملاحظات') }}:</strong> {{ ticket.approval_notes }}</p>
                    {% endif %}
                </article>
            {% endif %}

            <article class="detail-block">
                <h2>{{ ltext('Tags / الوسوم') }}</h2>
                <div class="tag-row">
                    {% for tag in ticket.tags %}
                        <span class="tag">{{ tag.name }}</span>
                    {% else %}
                        <span class="muted">{{ ltext('No tags assigned. / لا توجد وسوم.') }}</span>
                    {% endfor %}
                </div>
            </article>

            <article class="detail-block">
                <h2>{{ t('public_conversation') }}</h2>
                <div class="timeline">
                    {% for comment in comments %}
                        <div class="timeline-item">
                            <strong>{{ comment.author.full_name if comment.author else t('system') }}</strong>
                            <small>{{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
                            <p>{{ comment.content }}</p>
                        </div>
                    {% else %}
                        <p>{{ ltext('No public comments yet. / لا توجد تعليقات عامة.') }}</p>
                    {% endfor %}
                </div>
                {% if ticket_permissions.can_comment %}
                    <form method="post" action="{{ url_for('tickets.add_comment', ticket_id=ticket.id) }}" class="form-grid">
                        {{ comment_form.hidden_tag() }}
                        <label>{{ comment_form.content.label }} {{ comment_form.content(class="textarea", rows="4") }}</label>
                        {{ comment_form.submit(class="button") }}
                    </form>
                {% endif %}
            </article>

            {% if ticket_permissions.can_add_note %}
                <article class="detail-block">
                    <h2>{{ t('internal_notes') }}</h2>
                    <div class="timeline">
                        {% for note in notes %}
                            <div class="timeline-item internal">
                                <strong>{{ note.author.full_name if note.author else t('system') }}</strong>
                                <small>{{ note.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
                                <p>{{ note.content }}</p>
                            </div>
                        {% else %}
                            <p>{{ ltext('No internal notes. / لا توجد ملاحظات داخلية.') }}</p>
                        {% endfor %}
                    </div>
                    <form method="post" action="{{ url_for('tickets.add_note', ticket_id=ticket.id) }}" class="form-grid">
                        {{ note_form.hidden_tag() }}
                        <label>{{ note_form.content.label }} {{ note_form.content(class="textarea", rows="4") }}</label>
                        {{ note_form.submit(class="button") }}
                    </form>
                </article>
            {% endif %}
        </article>

        <div class="stack-column">
            <article class="panel">
                <div class="panel-header">
                    <h2>{{ t('assignment_status') }}</h2>
                </div>
                {% if ticket_permissions.can_assign %}
                    <form method="post" action="{{ url_for('tickets.assign', ticket_id=ticket.id) }}" class="form-grid">
                        {{ assignment_form.hidden_tag() }}
                        <label>{{ assignment_form.assigned_to_id.label }} {{ assignment_form.assigned_to_id(class="input") }}</label>
                        <label>{{ assignment_form.department_id.label }} {{ assignment_form.department_id(class="input") }}</label>
                        <label>{{ assignment_form.reason.label }} {{ assignment_form.reason(class="input") }}</label>
                        {{ assignment_form.submit(class="button") }}
                    </form>
                {% endif %}
                {% if ticket_permissions.can_change_status %}
                    <form method="post" action="{{ url_for('tickets.change_status', ticket_id=ticket.id) }}" class="form-grid">
                        {{ status_form.hidden_tag() }}
                        <label>{{ status_form.status_id.label }} {{ status_form.status_id(class="input") }}</label>
                        {{ status_form.submit(class="button button-secondary") }}
                    </form>
                {% endif %}
            </article>

            {% if ticket_permissions.can_approve %}
                <article class="panel">
                    <div class="panel-header">
                        <h2>{{ ltext('Approval Control / التحكم بالاعتماد') }}</h2>
                    </div>
                    <form method="post" action="{{ url_for('tickets.approval', ticket_id=ticket.id) }}" class="form-grid">
                        {{ approval_form.hidden_tag() }}
                        <label>{{ approval_form.notes.label }} {{ approval_form.notes(class="input") }}</label>
                        <input type="hidden" name="approval_action" value="{{ 'unlock' if ticket.is_approved else 'approve' }}">
                        {{ approval_form.submit(class="button", value=(ltext('Unlock Ticket / فتح قفل التذكرة') if ticket.is_approved else ltext('Approve Ticket / اعتماد التذكرة'))) }}
                    </form>
                </article>
            {% endif %}

            {% if ticket_permissions.can_mark_paid %}
                <article class="panel">
                    <div class="panel-header">
                        <h2>{{ ltext('Paid Ticket / تذكرة مأجورة') }}</h2>
                    </div>
                    <form method="post" action="{{ url_for('tickets.paid', ticket_id=ticket.id) }}" class="form-grid">
                        {{ paid_form.hidden_tag() }}
                        <label>{{ paid_form.amount.label }} {{ paid_form.amount(class="input", step="0.01") }}</label>
                        <label>{{ paid_form.currency.label }} {{ paid_form.currency(class="input") }}</label>
                        <label>{{ paid_form.notes.label }} {{ paid_form.notes(class="input") }}</label>
                        {% if ticket.company_id %}
                            <label>
                                {{ paid_form.external_user_ids.label }}
                                {{ paid_form.external_user_ids(class="input", multiple=true, size=6) }}
                                <small>{{ ltext('Choose the external users from this company who should see the paid ticket. / اختر المستخدمين الخارجيين من هذه الشركة الذين يجب أن تظهر لهم التذكرة المأجورة.') }}</small>
                            </label>
                        {% else %}
                            <p class="muted">{{ ltext('External paid-ticket access is available only for tickets linked to a company. / إظهار التذكرة المأجورة للمستخدمين الخارجيين متاح فقط للتذاكر المرتبطة بشركة.') }}</p>
                        {% endif %}
                        <input type="hidden" name="paid_action" value="mark">
                        {{ paid_form.submit(class="button") }}
                    </form>
                    {% if ticket.is_paid_ticket %}
                        <form method="post" action="{{ url_for('tickets.paid', ticket_id=ticket.id) }}" class="form-grid">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="paid_action" value="remove">
                            <button type="submit" class="button button-secondary">{{ ltext('Remove Paid Flag / إزالة وسم المأجور') }}</button>
                        </form>
                    {% endif %}
                </article>
            {% endif %}

            {% if ticket_permissions.can_upload %}
                <article class="panel">
                    <div class="panel-header">
                        <h2>{{ t('attachments') }}</h2>
                    </div>
                    <form method="post" action="{{ url_for('tickets.upload_attachments', ticket_id=ticket.id) }}" enctype="multipart/form-data" class="form-grid" data-upload-form>
                        {{ attachment_form.hidden_tag() }}
                        <label>{{ attachment_form.description.label }} {{ attachment_form.description(class="input") }}</label>
                        <label class="checkbox-row">{{ attachment_form.is_log_file() }} <span>{{ ltext('Mark upload as log file / اعتباره ملف سجل') }}</span></label>
                        <label>{{ attachment_form.files.label }} {{ attachment_form.files(class="input") }}</label>
                        <div class="upload-progress" data-upload-progress hidden>
                            <div class="upload-progress-bar" data-upload-progress-bar></div>
                        </div>
                        {{ attachment_form.submit(class="button") }}
                    </form>
                </article>
            {% endif %}

            <article class="panel">
                <div class="panel-header">
                    <h2>{{ t('attachments') }}</h2>
                </div>
                <ul class="list-stack compact-list">
                    {% for attachment in ticket.attachments.all() %}
                        <li><a href="{{ url_for('files.download', file_id=attachment.file.id) }}">{{ attachment.file.original_name }}</a> <span>{{ attachment.file.size_bytes|filesize }}</span></li>
                    {% else %}
                        <li>{{ ltext('No attachments uploaded. / لا توجد مرفقات.') }}</li>
                    {% endfor %}
                </ul>
            </article>

            <article class="panel">
                <div class="panel-header">
                    <h2>{{ t('activity_timeline') }}</h2>
                </div>
                <div class="timeline compact">
                    {% for activity in activities %}
                        <div class="timeline-item {% if activity.is_internal %}internal{% endif %}">
                            <strong>{{ activity.actor.full_name if activity.actor else t('system') }}</strong>
                            <small>{{ activity.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
                            <p>{{ activity.message }}</p>
                        </div>
                    {% else %}
                        <p>{{ ltext('No activity logged. / لا يوجد نشاط.') }}</p>
                    {% endfor %}
                </div>
            </article>

            {% if ticket_permissions.can_merge %}
                <article class="panel">
                    <div class="panel-header">
                        <h2>{{ t('merge_ticket') }}</h2>
                    </div>
                    <form method="post" action="{{ url_for('tickets.merge', ticket_id=ticket.id) }}" class="form-grid">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <label>{{ ltext('Target Ticket ID / رقم التذكرة الهدف') }} <input class="input" type="number" name="target_ticket_id" min="1" required></label>
                        <button class="button button-secondary" type="submit">{{ ltext('Merge Into Target / الدمج مع الهدف') }}</button>
                    </form>
                </article>
            {% endif %}
        </div>
    </section>
{% endblock %}