ACORE/templates/pages/it-support.html

<div class="page-content">

    <div style="margin-bottom:1.5rem;">
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">Підтримка IT</h1>
        <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">Технічна допомога та заявки на обслуговування</p>
    </div>

    {% if ticket_created %}
    <div style="background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.3); border-radius:0.75rem; padding:1rem 1.25rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:0.75rem;">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" style="flex-shrink:0;">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
        </svg>
        <div style="font-size:0.875rem; color:#16a34a;">Заявку {{ ticket_created.number }} створено. IT-відділ зв'яжеться з вами.</div>
    </div>
    {% endif %}

    <div style="display:grid; grid-template-columns:1fr 340px; gap:1.25rem; align-items:start;">

        <!-- Форма заявки -->
        <form hx-post="/it-support/" hx-target="#main-content" hx-indicator="#loader"
              style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); overflow:hidden; margin:0;">
            {% csrf_token %}
            <div style="padding:1.25rem 1.5rem; border-bottom:1px solid var(--color-border);">
                <h3 style="font-size:1rem; font-weight:600; color:var(--color-foreground);">Нова заявка</h3>
                <p style="font-size:0.8125rem; color:var(--color-muted-foreground); margin-top:0.25rem;">Опишіть вашу проблему і ми зв'яжемося якнайшвидше.</p>
            </div>
            <div style="padding:1.5rem; display:flex; flex-direction:column; gap:1rem;">

                <div>
                    <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">Тема звернення <span style="color:var(--color-destructive);">*</span></label>
                    <input type="text" name="title" required placeholder="Наприклад: Не працює принтер у кабінеті 204" class="input" style="width:100%;">
                </div>

                <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem;">
                    <div>
                        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">Категорія</label>
                        <select name="ticket_type" class="input" style="width:100%;" onchange="dqaHandleChange(this, 'ticket_type', 'code')">
                            {% for value, label in ticket_types %}
                            <option value="{{ value }}" {% if value == 'repair' %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                            <option value="__new__">+ Додати нову категорію...</option>
                        </select>
                    </div>
                    <div>
                        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">Пріоритет</label>
                        <select name="priority" class="input" style="width:100%;" onchange="dqaHandleChange(this, 'ticket_priority', 'code')">
                            {% for value, label in ticket_priorities %}
                            <option value="{{ value }}" {% if value == 'medium' %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                            <option value="__new__">+ Додати новий пріоритет...</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">Опис проблеми <span style="color:var(--color-destructive);">*</span></label>
                    <textarea name="description" required placeholder="Детально опишіть проблему: що відбувається, коли виникло, що вже намагались зробити..."
                        style="width:100%; min-height:7rem; resize:vertical; background:var(--color-card); border:1px solid var(--color-input); border-radius:var(--radius); padding:0.4375rem 0.75rem; font-size:0.875rem; color:var(--color-foreground); font-family:var(--font-sans); outline:none; transition:border-color 150ms, box-shadow 150ms; box-sizing:border-box;"
                        onfocus="this.style.borderColor='var(--color-ring)'; this.style.boxShadow='0 0 0 3px hsl(0 72% 44% / 0.1)'"
                        onblur="this.style.borderColor=''; this.style.boxShadow=''"></textarea>
                </div>

            </div>
            <div style="padding:1rem 1.5rem; border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:0.5rem;">
                <button type="submit" class="btn btn-primary" style="display:inline-flex; align-items:center; gap:0.375rem;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
                    Надіслати заявку
                </button>
            </div>
        </form>

        <!-- Права колонка -->
        <div style="display:flex; flex-direction:column; gap:1rem;">

            <!-- Контакти IT -->
            <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); overflow:hidden;">
                <div style="padding:0.875rem 1.25rem; border-bottom:1px solid var(--color-border);">
                    <span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">Контакти IT-відділу</span>
                </div>
                <div style="padding:1.125rem 1.25rem; display:flex; flex-direction:column; gap:0.5rem;">
                    <div style="display:flex; align-items:center; gap:0.5rem; font-size:0.8125rem; color:var(--color-muted-foreground);">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                        it-support@aks-pharma.ua
                    </div>
                    <div style="display:flex; align-items:center; gap:0.5rem; font-size:0.8125rem; color:var(--color-muted-foreground);">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.29 6.29l1.8-1.81a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7a2 2 0 0 1 1.72 2.02z"/></svg>
                        Внутрішній: 021
                    </div>
                    <div style="display:flex; align-items:center; gap:0.5rem; font-size:0.8125rem; color:var(--color-muted-foreground);">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                        Пн–Пт, 08:00–18:00
                    </div>
                </div>
            </div>

            <!-- Мої заявки -->
            <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); overflow:hidden;">
                <div style="padding:0.875rem 1.25rem; border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center;">
                    <span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">Мої заявки</span>
                    {% if my_open_count %}
                    <span class="badge badge-warning">{{ my_open_count }} відкритих</span>
                    {% endif %}
                </div>
                <div>
                    {% for ticket in my_tickets %}
                    <div style="padding:0.75rem 1.25rem; {% if not forloop.last %}border-bottom:1px solid var(--color-border);{% endif %}" class="li-hover">
                        <div style="display:flex; justify-content:space-between; margin-bottom:0.125rem;">
                            <span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">{{ ticket.number }}</span>
                            {% if ticket.status.code == 'resolved' or ticket.status.code == 'closed' %}
                            <span class="badge badge-success">{{ ticket.status.name }}</span>
                            {% elif ticket.status.code == 'new' %}
                            <span class="badge badge-info">{{ ticket.status.name }}</span>
                            {% else %}
                            <span class="badge badge-warning">{{ ticket.status.name }}</span>
                            {% endif %}
                        </div>
                        <div style="font-size:0.75rem; color:var(--color-muted-foreground);">{{ ticket.title|truncatechars:40 }} · {{ ticket.created_at|date:"d.m" }}</div>
                    </div>
                    {% empty %}
                    <div style="padding:1.25rem; text-align:center; font-size:0.8125rem; color:var(--color-muted-foreground);">У вас поки немає заявок</div>
                    {% endfor %}
                </div>
                {% include "partials/pagination.html" with page=my_tickets base_url="/it-support/" page_param="tickets_page" size_param="tickets_per_page" item_label="заявок" %}
            </div>

        </div>
    </div>
</div>