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

<!--Pagetitle-->
<div class="pagetitle">
    <h1>{{object|model_name_plural|title}}</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
			<a 
				hx-get="{% url "bloomerp_home_view" %}" 
				hx-target="#main-content" 
				hx-push-url="true" 
				type="submit"
				class="pointer"
				class="breadcrumb-link"
				>
				Home
			</a>
		</li>
        <li class="breadcrumb-item">
			<a hx-get="{% if list_view_url %}{% url list_view_url %}{% endif %}" 
				hx-target="#main-content" 
				hx-swap="innerHTML" 
				hx-push-url="true"
				class="pointer"
				>{{object|model_name_plural|title}}</a></li>
        <li class="breadcrumb-item active">{{object}}</li>
      </ol>
    </nav>
</div>
<!--End Pagetitle-->

<!--Card--> 
<div class="card dashboard">
	<!--Card header-->
	{% include "detail_views/snippets/card_header.html" with content_type_id=content_type_id object=object %}
	<!--End Card header-->

	<!--Card body-->
	<div class="card-body">

		<!--Picture-->
		<div class="d-flex justify-content-center mb-3">
			{% avatar object=object size="6em" class_name="rounded-circle" %}
		</div>
		<!--End Picture-->

		<!--Text under picture-->
		<div class="d-flex justify-content-center">
				<h2>{{object}}</h2>
		</div>
		<!--End Text under picture-->

		<!--Card Tabs-->
		<ul class="nav nav-tabs nav-tabs-bordered mb-2">
			<!--If tabs are defined in the view, it should override-->
			{% if tabs %}
				{% for tab in tabs %}
				<li class="nav-item">
					<a class="nav-link"
					{% if tab.requires_pk %}hx-get="{% url tab.url object.pk %}"{% else %}hx-get="{% url tab.url %}"{% endif %}
					type="submit"
					hx-swap="innerHTML" 
					hx-trigger="click"
					hx-target="#detail-view-content"
					hx-push-url="true"
					hx-on::after-request="setActiveTab(this)"
					{% if tab.requires_pk %} id="{% url tab.url object.pk %}" {% else %} id="{% url tab.url %}" {% endif %}>
					{{tab.name}}
					</a>
				</li>
				{% endfor %}
			{% else %}
				{% for tab in detail_view_tabs %}
				<li class="nav-item">
					<a class="nav-link"
						hx-get="{% url tab.link.url object.pk %}" 
						type="submit"
						hx-swap="innerHTML" 
						hx-trigger="click"
						hx-target="#detail-view-content"
						hx-push-url="true"
						hx-on::after-request="setActiveTab(this)"
						data-bs-toggle="tooltip"
						data-bs-placement="top"
						title="{{tab.link.description}}"
						id="{% url tab.link.url object.pk %}">{{tab.link.name}}</a>
				</li>
				{% endfor %}
			{% endif %}
		</ul>
		<!--End Card Tabs-->

		<!--Content-->
		<div id="detail-view-content">
			{% block content %}
			{% if include_detail_content %}
				{% include include_detail_content %}
			{% endif %}
			{% endblock content %}
		</div>
		<!--End Content-->

	</div>
	<!--End Card body-->

</div>
<!--End Card-->

<!--Update tabs modal-->
<div class="modal fade" id="updateTabsModal" tabindex="-1" aria-labelledby="updateTabsModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="updateTabsModalLabel">Update tabs</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form method="POST" action="{% url 'components_detail_view_links' %}">
					{% csrf_token %}
					
					{{ detail_links_form | crispy }}

					<div class="d-flex justify-content-end">
						<button type="submit" class="btn btn-primary">Save</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!--End Update tabs modal-->


<!--Updating tabs-->
<script>
    var url_list = window.location.href.split('/')
    var url = "/";

    url_list.slice(3).map(function (x) { 
      if (x != "") {
        url += x + '/'
      }
    })
    	
    document.getElementById(url).classList.add('active');
	
	function setActiveTab(element) {
		var tabs = document.querySelectorAll('.nav-link');
		tabs.forEach(tab => {
			tab.classList.remove('active');
		});
		element.classList.add('active');
	}
</script>
<!--End Updating tabs-->

