{% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
<div class="oh-inner-sidebar-content">
	{% if perms.base.view_company %}
	<div
		class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
	>
		<h2 class="oh-inner-sidebar-content__title">{% trans "Company" %}</h2>
		{% if perms.base.add_company %}
		<button
			class="oh-btn oh-btn--secondary oh-btn--shadow"
			data-toggle="oh-modal-toggle"
			data-target="#companyModal"
			hx-get="{% url 'company-create' %}"
			hx-target="#companyForm"
		>
			<ion-icon name="add-outline" class="me-1"></ion-icon>
			{% trans "Create" %}
		</button>
		{% endif %}
	</div>
	{% if companies %}
		{% include 'base/company/company_view.html' %}
	{% else %}
		<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
			<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/company.png' %}" class="" alt="Page not found. 404." />
			<h5 class="oh-404__subtitle">{% trans "There is no companies at this moment." %}</h5>
		</div>
	{% endif %}
	{% endif %}
</div>

<div
	class="oh-modal"
	id="companyModal"
	role="dialog"
	aria-labelledby="companyModal"
	aria-hidden="true"
>
	<div class="oh-modal__dialog">
		<div class="oh-modal__dialog-header">
			<h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
				{% trans "Create Company" %}
			</h2>
			<button class="oh-modal__close" aria-label="Close">
				<ion-icon name="close-outline"></ion-icon>
			</button>
		</div>
		<div class="oh-modal__dialog-body" id="companyForm"></div>
	</div>
</div>

<div
	class="oh-modal"
	id="companyEditModal"
	role="dialog"
	aria-labelledby="companyEditModal"
	aria-hidden="true"
>
	<div class="oh-modal__dialog">
		<div class="oh-modal__dialog-header">
			<h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
				{% trans "Update Company" %}
			</h2>
			<button class="oh-modal__close" aria-label="Close">
				<ion-icon name="close-outline"></ion-icon>
			</button>
		</div>
		<div class="oh-modal__dialog-body" id="companyEditForm"></div>
	</div>
</div>

{% endblock settings %}
