{% extends 'base.html.twig' %}

{% block title %}
	{{ 'home.title'|trans(domain='home') }}
{% endblock %}

{% block content %}

	<div class="row">

		<div class="col-12 col-lg-3 mb-3">
			<div class="card card-200 text-bg-primary bg-gradient">
				<div class="card-body d-flex flex-column">
					<h5 class="card-title">{{ 'home.cards.ringo.title'|trans(domain='home') }}</h5>
					<p class="card-text bold">{{ 'home.cards.ringo.description'|trans(domain='home') }}</p>
					<p class="card-text">
						{% set ringos_length = ringos|length %}
						{% if ringos_length == 0 %}
							<small class="text-light">{{ 'home.cards.ringo.no_ringo'|trans(domain='home') }}</small>
						{% else %}
							<small class="text-light">{{ 'home.cards.ringo.have_ringo'|trans({ '%ringos_length%': ringos_length }, domain='home') }}</small>
						{% endif %}
					</p>

					<div class="mt-auto d-flex justify-content-end">
						{% if ringos_length == 0 %}
							<a href="{{ path('ringo_create') }}" class="btn btn-outline-light">
								<i class="bi bi-arrow-right"></i>
							</a>
						{% else %}
							<a href="{{ path('ringo_index') }}" class="btn btn-outline-light">
								<i class="bi bi-arrow-right"></i>
							</a>
						{% endif %}
					</div>
				</div>
			</div>
		</div>

		<div class="col-12 col-lg-3">
			<div class="card card-200 text-bg-secondary">
				<div class="card-body d-flex flex-column">
					<h5 class="card-title">{{ 'home.cards.new.title'|trans(domain='home') }}</h5>
					<p class="card-text">{{ 'home.cards.new.description'|trans(domain='home') }}</p>

					<div class="d-flex justify-content-end mt-auto">
						<button class="btn btn-outline-light" disabled>
							<i class="bi bi-arrow-right"></i>
						</button>
					</div>
				</div>
			</div>
		</div>

	</div>

{% endblock %}