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

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

{% block body %}
	<div class="card mb-12">
		<div class="card-body flex-column p-5">
			<div class="d-flex align-items-center h-lg-300px p-5 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 Access per scope</h1>
						<div class="position-relative w-100 text-gray-800">
							<p>Foxorder's API contains diffrents roles. Each endpoint is restricted for one or multiple roles depending on its need.</p>
							<p>If you would like to test these endpoints
								<a href="{{ path('foxorders_api_doc') }}" target="_blank">in our Swagger UI docs</a>, you need to retrieve a JWT token first.</p>
							<p>Here are the roles available in our API:</p>
							<div class="list-group text-active-gray-800">
								<span class="list-group-item list-group-item-action flex-column align-items-start">
									<div class="d-flex w-100 justify-content-between">
										<span class="fw-bold">SCOPE MANAGER</span>The manager of the franchise
									</div>

								</span>
								<span class="list-group-item list-group-item-action flex-column align-items-start">
									<div class="d-flex w-100 justify-content-between">
										<span class="fw-bold">SCOPE SHOP_OWNER</span>The manager of the shop
									</div>
								</span>
								<span class="list-group-item list-group-item-action flex-column align-items-start">
									<div class="d-flex w-100 justify-content-between">
										<span class="fw-bold">SCOPE FRONT</span>Franchise's online shop
									</div>
								</span>
								<span class="list-group-item list-group-item-action flex-column align-items-start">
									<div class="d-flex w-100 justify-content-between">
										<span class="fw-bold">SCOPE CUSTOMER</span>The customer
									</div>
								</span>
							</div>
						</div>
					</div>
					<div class="col-md-4 text-center">
						<img alt="Logo" src="{{ asset( foxorders_doc ~ 'api-photo-page.jpg') }}" 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">Description</th>
							<th class="min-w-90px text-center">FRONT</th>
							<th class="min-w-90px text-center">MANAGER</th>
							<th class="min-w-90px text-center">SHOP_OWNER</th>
							<th class="min-w-90px text-center">CUSTOMER</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 %}
								<tr>
									<td>
										<span class="mb-1 text-hover-primary">{{ value.api }}</span>
									</td>
									<td class="text-center">
										{% if 'POST' == value.type %}
											{% set typeClass = 'warning' %}
										{% elseif 'PUT' == value.type %}
											{% set typeClass = 'primary' %}
										{% elseif 'PATCH' == value.type %}
											{% set typeClass = 'info' %}
										{% elseif 'DELETE' == value.type %}
											{% set typeClass = 'danger' %}
										{% else %}
											{% set typeClass = 'success' %}
										{% endif %}
										{{ value.type|upper|badge('light-' ~ typeClass, false) }}
									</td>
									<td>
										<span class="mb-1 text-hover-primary">{{ value.description|raw }}</span>
									</td>
									<td class="text-center">
										{{ (value.api_role  ? authorized : unauthorized)|raw }}
									</td>
									<td class="text-center">
										{{ (value.manager  ? authorized : unauthorized)|raw }}
									</td>
									<td class="text-center">
										{{ (value.shop_owner  ? authorized : unauthorized)|raw }}
									</td>
									<td class="text-center">
										{{ (value.customer  ? authorized : unauthorized)|raw }}
									</td>
								</tr>
							{% 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 %}