@php
    $gradient = $secondary
        ? "linear-gradient(to bottom, {$primary} 0 50%, {$secondary} 50% 100%)"
        : $primary;
@endphp

<div class="belt-preview-list">

    <div
        class="belt-left"
        style="background: {{ $gradient }}"
    ></div>

    <div class="belt-black">

        @for($i = 0; $i < $verticalCount; $i++)
            <span
                class="belt-v-stripe"
                style="
                    right: {{ 10 + ($i * 4) }}px;
                    background: {{ $verticalColor ?: '#ffffff' }};
                "
            ></span>
        @endfor

    </div>

    <div
        class="belt-right"
        style="background: {{ $gradient }}"
    ></div>

    @if($horizontalCount >= 1 && $horizontalColor1)
        <span
            class="belt-h-stripe"
            style="
                top: 7px;
                background: {{ $horizontalColor1 }};
            "
        ></span>
    @endif

    @if($horizontalCount == 2 && $horizontalColor2)
        <span
            class="belt-h-stripe"
            style="
                top: 10px;
                background: {{ $horizontalColor2 }};
            "
        ></span>
    @endif

</div>