{% extends 'Layouts/Doc/default.html.twig' %}

{% block title %}Documentation
{% endblock %}

{% block headerPageTitle %}
	{{ 'app.documentation.page.title.error'|trans |upper}}
{% endblock %}

{% macro renderTree(node, level) %}
	{% set badgeClass = {
		0: 'light-primary',
		1: 'light-info',
		2: 'light-warning',
		3: 'light-success',
		4: 'secondary',
	}[level]|default('secondary') %}

	<li class="list-group-item">
		<span class="d-block mb-2">{{ node.name|badge(badgeClass) }}</span>
		{% if node.messages is not empty %}
			<ul class="list-group ms-4">
				{% for message in node.messages %}
					<li class="list-group-item">=> {{ message }}</li>
				{% endfor %}
			</ul>
		{% endif %}
		{% if node.children is not empty %}
			<ul class="list-group ms-4">
				{% for childPath, childNode in node.children %}
					{{ _self.renderTree(childNode, level + 1) }}
				{% endfor %}
			</ul>
		{% endif %}
	</li>
{% endmacro %}

{% block body %}
	<div class="card mb-12">
		<div class="card-body flex-column px-5 py-3">
			<div class="d-flex align-items-center h-lg-300px px-5 py-3 p-lg-15">
				<div class="row">
					<div class="col-md-8 pt-5 scroll-y">
						<h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">API errors responses</h1>
						<div class="position-relative w-100 text-gray-800">
							<p>Foxorder's API includes an error management system, this system allows users to have assistance in case of error.</p>
							<p>Depending on the type of errors, the error message is often explicit (typing, null, format, etc.) otherwise, it indicates the source of the error and possibly the solution.</p>
						</div>
					</div>
					<div class="col-md-4 text-center">
						<img alt="Logo" src="{{ asset( foxorders_doc ~ 'api-error.svg') }}" style="width:300px; height:auto">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold">
					<thead class="fs-7 text-gray-400 text-uppercase">
						<tr>
							<th class="min-w-250px">Endpoint</th>
							<th class="min-w-90px text-center">Method</th>
							<th class="min-w-250px text-center">Error code => message</th>
						</tr>
					</thead>
					<tbody class="fs-6 text-gray-800">
						{% for group in apis %}
							{% if section is null %}
								<tr>
									<td colspan="8" class="text-center bg-light-dark">
										{{ group.group|upper }}
									</td>
								</tr>
							{% endif %}
							{% set authorized = 'app.documentation.badge.authorized'|trans|badge('light-success', false) %}
							{% set unauthorized = 'app.documentation.badge.unauthorized'|trans|badge('light-danger', false) %}
							{% for value in group.list %}
								{% if value.errors is defined %}
									<tr style="border-bottom: 1px solid #cccccc;">
										<td><span class="mb-1 text-hover-primary">{{ value.api }}</span></td>
										<td class="text-center">
											{% set typeClass = {
												'POST': 'warning',
												'PUT': 'primary',
												'PATCH': 'info',
												'DELETE': 'danger'
											}[value.type]|default('success') %}

											{{ value.type|upper|badge('light-' ~ typeClass, false) }}
										</td>
										<td>
											<ul class="list-group">
											{% for err in value.errors %}
												<li class="list-group-item">
													<span class="text-hover-primary d-block">{{ err.code|badge('light-danger') }} => {{ err.message }}</span>
													{% if err.violations is defined %}
														<ul class="list-group mt-3">
															{% for nodePath, node in err.violations %}
																{{ _self.renderTree(node, 0) }}
															{% endfor %}
														</ul>
													{% endif %}
												</li>
											{% endfor %}
											</ul>
										</td>
									</tr>
								{% endif %}
							{% else %}
								<tr>
									<td colspan="8" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</td>
								</tr>
							{% endfor %}

						{% else %}
							<tr>
								<td colspan="8" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
{% endblock %}