@page "/ModeSelector"

<div class="d-flex justify-content-between">
    <div class="px-2">
        <div class="card shadow" style="width: 20rem; height:22rem;">
            <div class="card-header d-flex py-3 fs-1 justify-content-evenly">
                <div class="px-2">
                    <i class="fa-regular fa-file-excel"></i>
                </div>
                <div class="px-2">
                    <i class="fa-solid fa-file-csv"></i>
                </div>
                <div class="px-2">
                    <i class="fa-regular fa-file-code"></i>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">Order Import</h5>
                <p class="card-text">Order import from external third party programs for standard-featured doors.</p>
                <p>Format recognized: CSV, XML and Json.</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-primary">Go To Order Import</a>
            </div>
        </div>
    </div>
    <div class="px-2">
        <div class="card shadow" style="width: 20rem; height:22rem;">
            <div class="card-header d-flex py-3 fs-1 justify-content-evenly">
                <div class="px-2">
                    <i class="fa-solid fa-cart-shopping"></i>
                </div>
                <div class="px-2">
                    <i class="fa-solid fa-cart-plus"></i>
                </div>
                <div class="px-2">
                    <i class="fa-solid fa-cart-arrow-down"></i>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">Order Manage</h5>
                <p class="card-text">Create and manage orders choosing from door models and template available on the platform or already defined.</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-primary">Go To Order Manager</a>
            </div>
        </div>
    </div>
    <div class="px-2">
        <div class="card shadow" style="width: 20rem; height:22rem;">
            <div class="card-header d-flex py-3 fs-1 justify-content-evenly">
                <div class="px-2">
                    <i class="fa-solid fa-door-open"></i>
                </div>
                <div class="px-2">
                    <i class="fa-solid fa-dungeon"></i>
                </div>
                <div class="px-2">
                    <i class="fa-solid fa-door-closed"></i>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">Door Modeling</h5>
                <p class="card-text">Create your unique door model, validate the design and get 2D and 3D preview.</p>
                <p>Choose materials, hardware, special working, ...</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-primary">Go To Door Modeler</a>
            </div>
        </div>
    </div>
    <div class="px-2">
        <div class="card shadow" style="width: 20rem; height:22rem;">
            <div class="card-header d-flex py-3 fs-1 justify-content-evenly">
                <div class="px-2">
                    <i class="fa-solid fa-gears"></i>
                </div>
                <div class="px-2">
                    <i class="fa-solid fa-users-gear"></i>
                </div>
                <div class="px-2">
                    <i class="fa-solid fa-gear"></i>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">Advanced Tasks</h5>
                <p class="card-text">Manage advanced task like template and catalog management, advanced search, ....</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-primary">Go To Advanced.</a>
            </div>
        </div>
    </div>
</div>


@code {

}