{% extends 'core/base/base.html' %}
{% load form_tags %}
{% load static %}
{% load jalali_tags %}
{% load jalali_extras %}
{% load humanize %}

{% block content %}
<div class="mt-6 max-w-5xl mx-auto" x-data="{ tab: 'details' }">

	<div class="bg-white border rounded-lg shadow-sm p-6 mb-6">
		<h1 class="text-2xl text-center font-semibold mb-4">جزئیات رکورد: {{ record }}</h1>

		<table class="min-w-full table-auto border-collapse border border-gray-200 mb-6">
			<thead class="bg-gray-100">
				<tr>
					<th class="border border-gray-300 px-4 py-2 text-center">فیلد</th>
					<th class="border border-gray-300 px-4 py-2 text-center">مقدار</th>
				</tr>
			</thead>
			<tbody>
				{% for field in fields %}
				<tr class="hover:bg-gray-50">
					<td class="border border-gray-300 px-4 py-2 font-medium">{{ field.verbose_name }}</td>
					<td class="border border-gray-300 px-4 py-2">
						{% if field.type == "url" %}
							<a href="{{ field.value }}" class="text-blue-600 hover:underline" target="_blank">{{ field.value|default:'' }}</a>
						{% elif field.type == "image" %}
							<img src="{{ field.value|default:'' }}" class="w-16 h-16 object-cover rounded border" alt="{{ field.verbose_name }}" loading="lazy">
						{% elif field.type == "date" %}
							{{ field.value|to_jalali:"%Y-%m-%d"|default:''|default:'' }}
						{% elif field.type == "datetime" %}
							{{ field.value|to_jalali:"%Y-%m-%d H:i:s"|default:''|default:'' }}
						{% elif field.type == "time" %}
							{{ field.value|time:"H:i:s"|default:''|default:'' }}
						{% elif field.type == "bool" %}
							<span class="text-lg font-bold">
								{% if field.value %}
									<span class="text-green-600">✔</span>
								{% else %}
									<span class="text-red-600">✖</span>
								{% endif %}
							</span>
						{% elif field.type == "fk" %}
							<a class="text-blue-600 hover:underline" href="{{ field.url }}">{{ field.value|default:'' }}</a>
						{% elif field.type == "int" %}
							{{ field.value|intcomma|default:'' }}
						{% else %}
							{{ field.value|default:'' }}
						{% endif %}
					</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>

		<div class="flex gap-4">
			<form method="post" class="flex-1">
				{% csrf_token %}
				<input type="hidden" name="action" value="restore">
				<button type="submit" class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition">بازیابی رکورد</button>
			</form>

			<form method="post" class="flex-1">
				{% csrf_token %}
				<input type="hidden" name="action" value="delete">
				<button type="submit" class="w-full bg-red-600 text-white py-2 rounded hover:bg-red-700 transition">حذف دائمی</button>
			</form>
		</div>
	</div>

</div>
{% endblock %}

{% block js %}
<script>
	// هر اسکریپت اضافی برای تعامل یا تایید کاربر قبل از حذف دائمی
</script>
{% endblock %}