{% load static %}
{% load bloomerp %}
{% load crispy_forms_tags %}


<div
	bloomerp-component="detail-view-frame"
	class="grid gap-6 xl:h-full xl:min-h-0 xl:overflow-hidden xl:gap-0 {% if include_detail_aside %}xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)_auto]{% else %}xl:grid-cols-[minmax(0,1fr)_auto]{% endif %}"
	data-detail-view-grid
>

	<section class="min-w-0 xl:h-full xl:min-h-0 xl:overflow-hidden">
		<div class="flex flex-col bg-white xl:h-full xl:min-h-0 xl:overflow-hidden">
			<!--Card Tabs-->
			<div
				bloomerp-component="detail-tabs"
				data-content-type-id="{{ detail_view_content_type_id }}"
				data-object-pk="{{ object.pk }}"
				data-can-manage="{% if can_manage_detail_tabs_preference %}true{% else %}false{% endif %}"
				data-save-url="{% url 'components_detail_tabs_preference' %}"
				data-item-modal-url="{% url 'components_detail_tabs_item_modal' %}"
				data-tab-strip
				class="sticky top-0 z-40 flex shrink-0 border-b border-gray-200 bg-white"
			>
				<div class="relative min-w-0 flex-1 overflow-x-auto no-scrollbar bg-white" style="overflow-y: visible;" data-tabs-strip-container>
					<ul class="flex min-w-max items-end gap-1" role="tablist" data-tabs-strip>
						{% for item in tab_items %}
							{% if item.is_folder %}
							<li
								data-tab-item
								data-tab-type="folder"
								data-item-id="{{ item.id }}"
								data-item-name="{{ item.name }}"
								class="relative shrink-0 cursor-pointer select-none border-b-2 border-transparent"
							>
								<button
									type="button"
									data-folder-toggle
									class="h-full w-full px-4 py-2 text-sm whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-primary-500 hover:cursor-pointer hover:bg-gray-50"
								>
									{{ item.name }}
								</button>
								<div class="absolute left-0 top-full z-50 mt-1 hidden min-w-56 rounded-xl border border-gray-200 bg-white shadow-xs" data-folder-tabs>
									{% for tab in item.tabs %}
										<a
											href="{{ tab.href }}"
											data-folder-tab-item
											data-item-id="{{ tab.id }}"
											data-item-name="{{ tab.name }}"
											data-item-url="{{ tab.url }}"
											data-tab-active="{% if tab.is_active %}true{% else %}false{% endif %}"
											{% if not tab.is_external %}hx-get="{{ tab.href }}" hx-swap="innerHTML" hx-target="#detail-view-content" hx-push-url="true"{% endif %}
											class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
										>{{ tab.name }}</a>
									{% empty %}
										<div class="px-4 py-2 text-sm text-gray-500" data-folder-empty><c-i18n.blocktrans>No tabs in folder</c-i18n.blocktrans></div>
									{% endfor %}
								</div>
							</li>
							{% else %}
							<li
								data-tab-item
								data-tab-type="tab"
								data-item-id="{{ item.id }}"
								data-item-name="{{ item.name }}"
								data-item-url="{{ item.url }}"
								data-tab-active="{% if item.is_active %}true{% else %}false{% endif %}"
								class="shrink-0 cursor-pointer select-none border-b-2 border-transparent"
							>
								<a
									href="{{ item.href }}"
									data-tab-link
									role="tab"
									aria-selected="{% if item.is_active %}true{% else %}false{% endif %}"
									{% if not item.is_external %}hx-get="{{ item.href }}" hx-swap="innerHTML" hx-target="#detail-view-content" hx-push-url="true"{% endif %}
									class="block h-full w-full px-4 py-2 text-sm whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-primary-500 hover:bg-gray-50"
								>{{ item.name }}</a>
							</li>
							{% endif %}
						{% endfor %}
					</ul>
				</div>
				<div class="flex shrink-0 items-stretch border-l border-gray-200">
					<c-features.preferences.select_preference_button
						model="UserDetailViewTabsPreference"
						selected_preference_name="{{ detail_tabs_preference.name }}"
						:args="detail_tabs_preference.get_scope"
						icon_only=True
						trigger_icon_class="fa fa-chevron-down"
						trigger_button_class="btn-ghost"
						trigger_class="h-full rounded-none px-4"
						trigger_aria_label="Select tabs preference"
						wrapper_class="h-full"
					/>
				</div>
			</div>
			<!--End Card Tabs-->

			<!--Content-->
			<div id="detail-view-content" class="min-w-0 p-4 xl:min-h-0 xl:flex-1 xl:overflow-y-auto">
				{% block content %}
					{% if include_detail_content %}
						{% include include_detail_content %}
					{% endif %}
				{% endblock content %}
			</div>
			<!--End Content-->
		</div>
	</section>

	<!--Side section-->
	<c-ui.resizable_div id="detail-aside" start_width="22rem" fit_to_main_bottom="true" class="w-full xl:border-0 border-t border-gray-200  xl:h-full xl:min-h-0 xl:self-stretch xl:-ml-px xl:w-[22rem]">
		<aside class="xl:h-full xl:min-h-0">
			<div class="relative flex flex-col overflow-hidden border-r border-gray-200 bg-white xl:h-full xl:min-h-0" data-resizable-div-panel>
				<div class="pointer-events-none absolute left-0 top-0 z-40 h-full w-px bg-gray-200"></div>
				<div class="flex shrink-0 justify-center px-6 pt-8">
					{% include "components/objects/avatar_upload.html" with content_type_id=detail_view_content_type_id %}
				</div>
				<div class="shrink-0 px-6 pb-8 pt-4 text-center">
					<h2 class="text-2xl font-semibold text-gray-900">{{ object }}</h2>
				</div>
				<div class="flex flex-col xl:min-h-0 xl:flex-1">
					<div class="flex flex-wrap justify-center gap-2">
						<button 
							class="btn btn-secondary btn-sm"
							hx-get="{% url 'components_activity_log' %}?content_type_id={{ content_type_id }}&object_id={{ object.id }}"
							hx-target="#object-sidesection"
							hx-animation	
							>
							<i class="fa fa-history"></i>
							<c-i18n.blocktrans>Activity</c-i18n.blocktrans>
						</button>
						<button 
							class="btn btn-secondary btn-sm"
							hx-get="{% url 'components_comments' content_type_id=content_type_id object_id=object.id %}"
							hx-target="#object-sidesection"
							hx-animation	
							>
							<i class="fa fa-comments"></i>
							<c-i18n.blocktrans>Comments</c-i18n.blocktrans>
						</button>
						{% if model_name != 'todo' and model_name != 'initiative' %}
						<button 
							class="btn btn-secondary btn-sm"
							hx-get="{% url 'components_create_todo_for_object' content_type_id=content_type_id object_id=object.id %}?content_type_id={{ content_type_id }}&object_id={{ object.id }}"
							hx-target="#detail-todo-modal-body"
							hx-animation
							hx-trigger="click"
							hx-push-url="false"
							bloomerp-open-modal="detail-todo-modal"	
							>
							<i class="fa fa-list-check"></i>
							<c-i18n.blocktrans>Create Todo</c-i18n.blocktrans>
						</button>
						{% endif %}
						{% for action in object_actions %}
							{% render_object_action action=action object=object request=request content_type_id=content_type_id %}
						{% endfor %}
					</div>
					<div
						hx-get="{% url 'components_activity_log' %}?content_type_id={{ content_type_id }}&object_id={{ object.id }}" 
						hx-target="#object-sidesection" 
						hx-trigger="load"
						hx-swap="innerHTML"
						class="mt-8 flex animate-fade-in flex-col overflow-hidden border-t border-gray-200 pt-4 xl:min-h-0 xl:flex-1"
						>
						<div id="object-sidesection" class="p-4 xl:min-h-0 xl:flex-1 xl:overflow-hidden">
							<!-- Activity log will load here -->
							<div class="text-center text-gray-500">
								Loading activity...
							</div>
						</div>
					</div>
				</div>
			</div>
		</aside>
	</c-ui.resizable_div>
	<!--End Side section-->	
</div>

<c-ui.modal 
	id="detail-todo-modal"
	title="Create todo"
></c-ui.modal>