<SfSchedule TValue="ActivityModel" Width="100%" Height="100%" @ref="_sch" @bind-CurrentView="@CurrentView">
    <ScheduleQuickInfoTemplates>
        <HeaderTemplate>

            @{ ActivityModel Data = context as ActivityModel; }
            @if (Data.Id != null) {

                @if (ViewModel.ActivityMode)
                {
                    <div class="schedule-info-header">
                        @Data.Subject
                    </div>
                }
                else
                {
                    var activity = ViewModel.Schedule.Network.Activities.ElementAt(Data.Id);
                    <div class="schedule-info-header">
                        @Data.Subject
                        <span class="schedule-info-header-duration">@activity.GetStateName()</span>
                        <span class="schedule-info-header-countdown">Expected Duration: @activity.Duration.ToTimeSpan().Humanize()</span>
                    </div>

                }
            }
        </HeaderTemplate>
        <ContentTemplate>

            @{ ActivityModel Data = context as ActivityModel; }
                @if (ViewModel.ActivityMode)
                {
                    <h5>@Data.Location</h5>
                    <button class="activity-notes-toggle" @onclick="() => ViewModel.ToggleNotes()">
                        <i class="oi oi-paperclip toggle-notes"/>Click to add notes.
                    </button>

                    @if (ViewModel.NotesVisible)
                    {
                        <textarea class="note-pad">

                            </textarea>
                    }
                }
                else
                {
                    var activity = ViewModel.Schedule.Network.Activities.ElementAt(Data.Id);
                    var note = @ViewModel.AllScheduleNotes.Find(note => note.ActivityId == activity.Id);

                    <div class="schedule-info-content">
                        <table class="schedule-info-content-table">
                            <tbody>

                            @if (activity.GetStateName() == "In Progress")
                            {
                                <tr><td>Started On:</td><td class="table-cell-right">@activity.Actual.StartedAt?.ToDateTimeUtc().ToString("d")</td></tr>
                                <tr><td>Anticipated Earliest Completion:</td><td class="table-cell-right">@activity.Anticipated.EarliestCompletion?.ToDateTimeUtc().ToString("d")</td></tr>
                                <tr><td>Anticipated Latest Completion:</td><td class="table-cell-right">@activity.Anticipated.LatestCompletion?.ToDateTimeUtc().ToString("d")</td></tr>
                            }

                            @if (activity.GetStateName() == "Completed")
                            {
                                <tr><td>Completed On:</td><td class="table-cell-right">@activity.Actual.CompletedAt?.ToDateTimeUtc().ToString("d")</td></tr>
                            }

                            @if (activity.GetStateName() == "Planned")
                            {
                                <tr><td>Anticipated Earliest Start:</td><td class="table-cell-right">@activity.Anticipated.EarliestStart?.ToDateTimeUtc().Humanize()</td></tr>
                                <tr><td>Anticipated Latest Start:</td><td class="table-cell-right">@activity.Anticipated.LatestStart?.ToDateTimeUtc().Humanize()</td></tr>
                                <tr><td>Anticipated Earliest Completion:</td><td class="table-cell-right">@activity.Anticipated.EarliestCompletion?.ToDateTimeUtc().ToString("d")</td></tr>
                                <tr><td>Anticipated Latest Completion:</td><td class="table-cell-right">@activity.Anticipated.LatestCompletion?.ToDateTimeUtc().ToString("d")</td></tr>
                            }
                            </tbody>
                        </table>
                        @{
                            if (note is not null)
                            {
                                <p class="activity-note">@note.Value</p>
                            }
                        }
                        <button class="activity-notes-toggle" @onclick="() => ViewModel.ToggleNotes()">
                            <i class="oi oi-pencil toggle-notes"/>
                            @if (note is not null)
                            {
                                <span>Click to modify note.</span>

                            } else
                            {
                                <span>Click to add note.</span>
                            }
                        </button>

                        @if (ViewModel.NotesVisible)
                        {
                            <textarea class="note-pad" @oninput="(e) => ViewModel.OnNoteChange(e, activity)" >
                                @{
                                    if (note is not null)
                                    {
                                        @note.Value.Trim();
                                    }
                                }
                            </textarea>
                            <button class="abic-success abic-table-button save-note" @onclick="(e) => ViewModel.SaveNote(activity)">
                                <span class="cell-button-label">Save Note</span>
                            </button>
                        }
                    </div>
                }
        </ContentTemplate>
        <FooterTemplate>

            @{ ActivityModel activity = context as ActivityModel; }

            @if (activity.Id != null)
            {
                @if (ViewModel.ActivityMode)
                {
                    var meta = ViewModel.InfoSource.ElementAt(activity.Id);

                    <button class="abic-success abic-table-button" @onclick="(e) => ViewModel.SelectSchedule(meta.ScheduleId)">
                        <span class="cell-button-label">Open Schedule</span>
                    </button>
                }
                else
                {
                    <ActivityActions Activity="@(ViewModel.Schedule.Network.Activities.ElementAt(activity.Id))" ViewModel="@ViewModel" Schedule="@_sch"/>
                }
            }

        </FooterTemplate>
    </ScheduleQuickInfoTemplates>
    <ScheduleEvents TValue="ActivityModel" ActionCompleted="OnActionCompleted" OnEventClick="OnEventClick" OnEventDoubleClick="OnEventDoubleClick" OnCellClick="OnCellClick" OnCellDoubleClick="OnCellDoubleClick"></ScheduleEvents>
    <ScheduleEventSettings DataSource="@ViewModel.DataSource"></ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Month" MaxEventsPerRow="3">
            <EventTemplate>
                @{ ActivityModel Data = context as ActivityModel; }
                @if (ViewModel.ActivityMode)
                {
                    <div>@Data.Location</div>
                }
                else
                {
                    <div>@Data.Subject</div>
                }
            </EventTemplate>
        </ScheduleView>
        <ScheduleView Option="View.Year" MaxEventsPerRow="10">
            <EventTemplate>
                @{ ActivityModel Data = context as ActivityModel; }
                @if (ViewModel.ActivityMode)
                {
                    <div>@Data.Location</div>
                }
                else
                {
                    <div>@Data.Subject</div>
                }
            </EventTemplate>
        </ScheduleView>
        <ScheduleView Option="View.TimelineMonth" MaxEventsPerRow="10">
            <EventTemplate>
                @if (ViewModel.ActivityMode)
                {
                    ActivityModel Data = context as ActivityModel;
                    <div>
                        <div>@Data.Subject</div>
                        <div>@Data.Location</div>
                    </div>
                }
                else
                {
                    ActivityModel Data = context as ActivityModel;
                    var activity = ViewModel.Schedule.Network.Activities.ElementAt(Data.Id);
                    var note = @ViewModel.AllScheduleNotes.Find(note => note.ActivityId == activity.Id);
                    var name = activity.Meta.Name;

                    <div id="@activity.Id" @onclick="() => OpenPopupJS(name)">
                        <div class="event-title-overflow">@Data.Subject</div>
                        @if (activity.Anticipated.StartSource == AnticipatedSource.Pinned || activity.Anticipated.CompletionSource == AnticipatedSource.Pinned)
                        {
                            <div class="event-label-right">Pinned</div>
                        }
                        else
                        {
                            <div class="event-label-right">@activity.GetStateName()</div>
                        }
                        <div class="event-label-right">@activity.Anticipated.Duration.ToTimeSpan().Humanize(minUnit: TimeUnit.Hour, precision:5)</div>

                        @if (note is not null)
                        {
                            <div class="note-indicator">
                                <i class="oi oi-file" />
                            </div>
                        }

                    </div>
                }
            </EventTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>