{% extends "base/f_base.html" %}
{% load static %}
{% load jalali_tags %}
{% block header %}
<link rel="stylesheet" href="{% static 'assets/css/dropify.min.css' %}">
<script type="text/javascript" src="{% static 'assets/js/jquery-3.7.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'assets/css/monolith.min.css' %}"/> 
<!-- Modern or es5 bundle -->
<script src="{% static 'assets/js/pickr.min.js' %}"></script>
<script src="{% static 'assets/js/pickr.es5.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/' %}compiled.min.css">

{% endblock header %}
{% block content %}
<div class="min-h-[84vh] flex flex-col items-start justify-start py-6">   
	{% if tickets %}
		{% for ticket in tickets %}
			<a href="{% url "front:ticket_single_fun" ticket.id %}" class="flex flex-row items-center justify-between py-4 mb-2 border-b border-neutral-200 px-4 w-full rounded-full outline outline-1 outline-offset-[-1px] outline-zinc-300">
				<div class="flex flex-row items-center justify-start gap-2">
					<svg class="w-1/6" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
						<rect width="36" height="36" rx="18" fill="#E5FFFF"/>
						<path d="M11 12H25C26.0938 12 27 12.9062 27 14V15.9062C27 16.2188 26.7812 16.5 26.5 16.5938C25.9062 16.8125 25.5 17.375 25.5 18C25.5 18.6562 25.9062 19.2188 26.5 19.4375C26.7812 19.5312 27 19.8125 27 20.125V22C27 23.125 26.0938 24 25 24H11C9.875 24 9 23.125 9 22V20.125C9 19.8125 9.1875 19.5312 9.5 19.4375C10.0625 19.2188 10.5 18.6562 10.5 18C10.5 17.375 10.0625 16.8125 9.5 16.5938C9.1875 16.5 9 16.2188 9 15.9062V14C9 12.9062 9.875 12 11 12ZM10.5 14V15.4062C11.375 15.9375 12 16.9062 12 18C12 19.125 11.375 20.0938 10.5 20.625V22C10.5 22.2812 10.7188 22.5 11 22.5H25C25.25 22.5 25.5 22.2812 25.5 22V20.625C24.5938 20.0938 24 19.125 24 18C24 16.9062 24.5938 15.9375 25.5 15.4062V14C25.5 13.75 25.25 13.5 25 13.5H11C10.7188 13.5 10.5 13.75 10.5 14ZM21.5 19.5V16.5H14.5V19.5H21.5ZM13 16C13 15.4688 13.4375 15 14 15H22C22.5312 15 23 15.4688 23 16V20C23 20.5625 22.5312 21 22 21H14C13.4375 21 13 20.5625 13 20V16Z" fill="#181F26"/>
					</svg>

					<div class="flex flex-col gap-2 items-start justify-center w-5/6">
						<p class="text-slate-700 text-base font-medium">{{ticket.subject}}</p>
						<p class="text-slate-400 text-sm font-normal">آخرین بروزرسانی {{ticket.updated_at|to_jalali:'%Y-%m-%d'}}</p>
					</div>
				</div>
				<span class="w-16 h-6 p-3 flex justify-center bg-yellow-50 rounded-[100px] outline outline-1 outline-offset-[-1px] items-center text-yellow-600 text-[10px] font-medium">
					{{ticket.get_status_display }}
				</span>
			</a>
		{% endfor %}
		<a href="{% url "front:ticket_add_fun" %}" class="h-12 px-6 py-3 rounded-full w-full mt-2 outline outline-1 outline-offset-[-1px] outline-gray-900 inline-flex justify-center items-center gap-2">
			<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M6.91089 1.21094V5.58594H11.2859C11.6414 5.58594 11.9421 5.88672 11.9421 6.24219C11.9421 6.625 11.6414 6.89844 11.2859 6.89844H6.91089V11.2734C6.91089 11.6562 6.61011 11.9297 6.25464 11.9297C5.87183 11.9297 5.59839 11.6562 5.59839 11.2734V6.89844H1.22339C0.840576 6.89844 0.567139 6.625 0.567139 6.24219C0.567139 5.88672 0.840576 5.58594 1.22339 5.58594H5.59839V1.21094C5.59839 0.855469 5.87183 0.554688 6.25464 0.554688C6.61011 0.554688 6.91089 0.855469 6.91089 1.21094Z" fill="#001A19"/>
			</svg>
			<span class="text-right justify-start text-slate-950 text-sm font-semibold">ثبت درخواست پشتیبانی</span>
		</a>
	{% else %}
		<div class="flex flex-col items-center justify-center gap-4 h-full w-full">
			<img class="mt-20" src={% static 'images/ticket.png' %}>
			<p class="text-slate-950 text-base font-medium">هیچ درخواست پشتیبانی ثبت نشده است.</p>
			<a href="{% url "front:ticket_add_fun" %}" class="h-12 px-6 py-3 bg-cyan-400 rounded-full inline-flex justify-center items-center gap-2">
				<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M6.91089 1.21094V5.58594H11.2859C11.6414 5.58594 11.9421 5.88672 11.9421 6.24219C11.9421 6.625 11.6414 6.89844 11.2859 6.89844H6.91089V11.2734C6.91089 11.6562 6.61011 11.9297 6.25464 11.9297C5.87183 11.9297 5.59839 11.6562 5.59839 11.2734V6.89844H1.22339C0.840576 6.89844 0.567139 6.625 0.567139 6.24219C0.567139 5.88672 0.840576 5.58594 1.22339 5.58594H5.59839V1.21094C5.59839 0.855469 5.87183 0.554688 6.25464 0.554688C6.61011 0.554688 6.91089 0.855469 6.91089 1.21094Z" fill="#001A19"/>
				</svg>
				<span class="text-right justify-start text-slate-950 text-sm font-semibold">ثبت درخواست پشتیبانی</span>
			</a>
		</div>
	{% endif %}
</div>
{% endblock content %}
{% block js %}
<script src="{% static 'assets/js/dropify.min.js' %}"></script>
<script src="{% static 'js/dropify-init.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>
{% endblock js %}