@using EventHub.Web.Pages.Events.Components.CreateEventArea
@model List<EventHub.Events.TrackDto>

<partial name="_progressSection.cshtml" model="@CreateEventAreaViewComponent.ProgressStepType.NewTrack"/>

@if (Model is not null)
{
    <div class="row"> 
        <div class="col-md-10 mx-auto">
            <div class="card">
                <div class="card-body profile-content p-5" style="min-height: 480px;"> 
                    <h2 class="mb-4">Add Track</h2> 
                    <div class="row">
                        @foreach (var track in Model)
                        {
                            <div class="col-md-3">
                                <div class="track-item mb-4">
                                    <span class="track-name">@track.Name</span>
                                    <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#editTrackModal" class="mt-3 d-block text-info"><small><i class="fa fa-edit me-1"></i>Edit</small></a>
                                </div>
                            </div>   
                        }
                        <div class="col-md-3">  
                            <div class="big-square-btn mb-4 text-center"> 
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#AddTrackModal" class="btn btn-outline-secondary d-block px-2 py-5"><i class="fa fa-plus mb-3"></i><br>Add New Track</a>
                            </div> 
                        </div>
                    </div>
                </div> 

                <div class="card-footer bg-white border-0 p-5 pt-1"> 
                    <div class="row">
                        <div class="col-6">
                            <a href="#" class="btn btn-secondary"><i class="fa fa-arrow-left me-2"></i> Previous Step </a>
                        </div>
                        <div class="col-6 text-end">
                            <a href="#" class="btn btn-link">Skip This Step</a>
                            <a href="#" class="btn btn-primary">Next Step <i class="fa fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div> 
        </div> 
    </div>
    
    @* Add Track modal *@
    <div class="modal fade" id="AddTrackModal" tabindex="-1" aria-labelledby="AddTrackModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 p-5 pb-2">
                    <h5 class="modal-title">Add New Track</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body profile-content px-5">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="TrackName" placeholder=" ">
                        <label for="TrackName">Track Name</label>
                    </div>
                </div>
                <div class="modal-footer border-0 p-5 pt-2">
                    <button type="button" class="btn btn-secondary modal-close-button" data-bs-dismiss="modal">Close</button>
                    <button id="AddNewTrackButton" type="button" class="btn btn-primary"
                            data-url="@Url.Action("GetTracksSection", "Event", new { id = "eventIdPlaceholder" })">
                        <i class="fa fa-plus me-2"></i> Add
                    </button>
                </div>
            </div>
        </div>
    </div>
}