{% extends "base.html" %}

{% block title %}{{ item.item_name }}{% endblock %}
{% block page_title %}{{ item.item_name }}{% endblock %}
{% block page_subtitle %}Item details{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="card max-w-2xl">
    <dl class="space-y-4 text-sm">
        <div>
            <dt class="text-slate-500">Category</dt>
            <dd class="font-medium text-slate-900">{{ item.category.name }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Service Type</dt>
            <dd class="font-medium text-slate-900">{{ item.get_service_type_display }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Price Range</dt>
            <dd class="font-medium text-slate-900 text-lg">{{ item.price_range_display }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Status</dt>
            <dd>{% if item.active %}Active{% else %}Inactive{% endif %}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Created</dt>
            <dd>{{ item.created_at|date:"d M Y, H:i" }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Updated</dt>
            <dd>{{ item.updated_at|date:"d M Y, H:i" }}</dd>
        </div>
    </dl>

    <div class="flex gap-3 mt-6">
        <a href="{% url 'items:list' %}" class="btn-secondary">Back to List</a>
        {% if can_manage %}
        <a href="{% url 'items:edit' item.pk %}" class="btn-primary">Edit Item</a>
        {% endif %}
    </div>
</div>
{% endblock %}