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

{% block title %}Starshop: Beam up some parts!{% endblock %}

{% block body %}
    <main class="flex flex-col lg:flex-row">
        {{ include('main/_shipStatusAside.html.twig') }}

        <div class="px-12 pt-10 w-full">
            <h1 class="text-4xl font-semibold mb-8">
                Ship Repair Queue
            </h1>

            <div class="space-y-5">

                {% for ship in ships %}
                    <div class="bg-[#16202A] rounded-2xl pl-5 py-5 pr-11 flex flex-col min-[1174px]:flex-row min-[1174px]:justify-between">
                        <div class="flex justify-center min-[1174px]:justify-start">
                            <img class="h-[83px] w-[84px]" src="{{ asset(ship.getStatusImageFilename) }}" alt="Status: {{ ship.getStatusAsString}}">
                            <div class="ml-5">
                                <div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center bg-amber-400/10">
                                    <div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
                                    <p class="uppercase text-xs text-nowrap">{{ ship.getStatusAsString }}</p>
                                </div>
                                <h4 class="text-[22px] pt-1 font-semibold">
                                    <a
                                        class="hover:text-slate-200"
                                        href="{{ path('app_starship_show', {id: ship.id}) }}"
                                    >{{ ship.name }}</a>
                                </h4>
                                <div>
                                    Arrived at: {{ ship.arrivedAt|date }}
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center min-[1174px]:justify-start mt-2 min-[1174px]:mt-0 shrink-0">
                            <div class="border-r border-white/20 pr-8">
                                <p class="text-slate-400 text-xs">Captain</p>
                                <p class="text-xl">{{ ship.captain }}</p>
                            </div>

                            <div class="pl-8 w-[200px]">
                                <p class="text-slate-400 text-xs">Class</p>
                                <p class="text-xl">{{ ship.class }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <p class="text-lg mt-5 text-center md:text-left">
                Looking for your next galactic ride?
                <a href="#" class="underline font-semibold">Browse the {{ ships|length * 10 }} starships for sale!</a>
            </p>
        </div>
    </main>
{% endblock %}