{{-- Feedback --}}
<div class="toast-wrapper">
    <div id="toastSuccess" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header toast-success">
            <span class="mr-3">👌🏼</span>
            <strong class="me-auto">Sucesso</strong>
            <a href="#" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                <img src="{{ asset('img/svg/Close_white.svg') }}" alt="Close">
            </a>
        </div>
        <div class="toast-body">
            <p></p>
        </div>
    </div>
    <div id="toastInfo" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header toast-info">
            <i class="bi bi-info-circle me-2"></i>
            <strong class="me-auto">Info</strong>
            <a href="#" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                <img src="{{ asset('img/svg/Close.svg') }}" alt="Close">
            </a>
        </div>
        <div class="toast-body">
            <p></p>
        </div>
    </div>
    <div id="toastWarning" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header toast-warning">
            <i class="bi bi-exclamation-circle me-2"></i>
            <strong class="me-auto">Aviso</strong>
            <a href="#" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                <img src="{{ asset('img/svg/Close.svg') }}" alt="Close">
            </a>
        </div>
        <div class="toast-body">
            <p></p>
        </div>
    </div>
    <div id="toastDanger" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header toast-danger">
            <span class="mr-3">😞</span>
            <strong class="me-auto">Ups!</strong>
            <a href="#" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                <img src="{{ asset('img/svg/Close_white.svg') }}" alt="Close">
            </a>
        </div>
        <div class="toast-body">
            <p></p>
        </div>
    </div>
</div>

{{-- Favorites --}}
<div class="toast-wrapper favorites">
    <div id="toastFavorites" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <i class="bi bi-heart-fill me-2"></i>
            <strong class="me-auto">Os teus favoritos serão guardados por tempo limitado</strong>
            <a href="#" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                <img src="{{ asset('img/svg/Close.svg') }}" alt="Close">
            </a>
        </div>
        <div class="toast-body">
            <p>Cria uma conta ou acede se já tiveres uma, e guardaremos os teus favoritos para que possas vê-los a partir de diferentes dispositivos. <a href="{{ Helper::route('login') }}" class="link link-black text-semibold">Aceder ou criar conta</a></p>
        </div>
    </div>   
</div>