@page "/"
@page "/load"

<h1>Load a Project</h1>

<ul>
    @foreach (var recentProject in this.recentProjects)
    {
        <li>@recentProject.Path</li>
    }
</ul>

<div>
    <button class="btn btn-secondary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#Assistant">
        <Icon Filename="add-project.svg" Size="25" AltText="Icon: Create new project"/>
        Create new project
    </button>
    <button class="btn btn-secondary me-2 mb-2" type="button">
        <Icon Filename="load.svg" Size="25" AltText="Icon: Open project"/>
        Open project
    </button>
</div>

<Assistant HeaderText="Create new project" IconName="add-project.svg" BaseHeight="new Assistant.Height(40, 40, 40)">
    <div class="mb-3">
        <label for="projectName" class="form-label fw-bold">Project Name:</label>
        <input type="text" class="form-control" id="projectName" placeholder="Type a project name">
    </div>
    
    @if (DeviceInfo.Idiom == DeviceIdiom.Desktop)
    {
        <div class="mb-3">
            <label for="projectPath" class="form-label fw-bold">Project destination:</label>
            <div class="input-group" id="projectPath">
                <button class="btn btn-primary" type="button" @onclick="@this.ChooseProjectDestination">Choose destination</button>
                <input type="text" class="form-control" value="@this.newProjectDestination" aria-label="The chosen project path" disabled readonly>
            </div>
        </div>
    }
    
    <button class="btn btn-secondary" type="button">Create project</button>
</Assistant>