@using Microsoft.AspNetCore.Mvc.Localization
@model gehGassi.Web.Models.CheckoutHeaderVm
@inject IViewLocalizer Localizer

<div class="row justify-content-center p-2">
    <div class="col-auto">
        <table class="table table-borderless table-cart-steps">
            <tr>
                <td><img src="/images/checkout_dog.png" alt="Start"/></td>
                <td><span class="circle @(Model.Step == 1 ? "active" : "")">1</span></td>
                <td><hr/></td>
                <td><span class="circle @(Model.Step == 2 ? "active" : "")">2</span></td>
                <td><hr/></td>
                <td><span class="circle @(Model.Step == 3 ? "active" : "")">3</span></td>
                <td><hr/></td>
                <td><span class="circle @(Model.Step == 4 ? "active" : "")">4</span></td>
                <td><hr/></td>
                <td><span class="circle @(Model.Step == 5 ? "active" : "")">5</span></td>
                <td><img src="/images/checkout_bone.png" alt="Goal"/></td>
            </tr>
            <tr>
                <td></td>
                <td id="checkoutStep1" class="step">@Localizer["Checkout_Step_1"]</td>
                <td></td>
                <td id="checkoutStep2" class="step">@Localizer["Checkout_Step_2"]</td>
                <td></td>
                <td id="checkoutStep3" class="step">@Localizer["Checkout_Step_3"]</td>
                <td></td>
                <td id="checkoutStep4" class="step">@Localizer["Checkout_Step_4"]</td>
                <td></td>
                <td id="checkoutStep5" class="step">@Localizer["Checkout_Step_5"]</td>
                <td></td>
            </tr>
        </table>
    </div>
</div>