@if (Entity != null) {
    var isVanguard = Entity.Vanguard() != null ? " vanguard" : "";

    <div class="enititiesContainer @isVanguard">
        <EntityHeaderComponent Entity=Entity></EntityHeaderComponent>

        <div class="entityPartsContainer">
            <EntityVanguardComponent Entity=Entity></EntityVanguardComponent>
            <EntityInfoComponent Entity=Entity></EntityInfoComponent>
            <EntityVanguardsComponent Entity=Entity></EntityVanguardsComponent>
            <EntityProductionComponent Entity=Entity></EntityProductionComponent>
            <EntityStatsComponent Entity=Entity></EntityStatsComponent>
            <EntityMechanicsComponent Entity=Entity></EntityMechanicsComponent>
            <EntityPassivesComponent Entity=Entity></EntityPassivesComponent>
            <EntityPyreSpellsComponent Entity=Entity></EntityPyreSpellsComponent>
            <EntityUpgradesComponent Entity=Entity></EntityUpgradesComponent>
            <EntityWeaponsComponent Entity=Entity></EntityWeaponsComponent>
            <EntityAbilitiesComponent Entity=Entity></EntityAbilitiesComponent>
        </div>
    </div>
}

<style>
    .enititiesContainer {
        margin-bottom: 12px;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 30px;
        display: flex;
        flex-wrap: wrap;
    }

    .vanguard {
        border: 4px solid var(--accent);
        border-radius: 8px;
    }

    .entityPartsContainer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }


    @@media only screen and (max-width: 1025px) {
        .enititiesContainer {
            padding: 0px;
        }

        .entityPartsContainer {
            margin: 0px;
        }
    }
</style>

@code {

    [Parameter]
    public EntityModel Entity { get; set; }

}