@model PantheonRA.BackOffice.Models.TimeRecordViewModel
@{
    var canUpdate = Model.UserPermissions.CanUpdate;
}

<div class="row document-head top-row-margin-bottom">
    @{
        var inProgressType = Model.EntryTypes.Where(s => s.InProgress).FirstOrDefault();
        var progressColor = inProgressType != null ? inProgressType.BackgroundColor : string.Empty;
        var progressIcon = inProgressType != null ? "fa " + inProgressType.Icon : "fas fa-home";
    }

    <div class="col-md-1 col-sm-6 col-xs-5 text-center top-row-large-font theme-button-color" id="stopwatch-div" style="color:@progressColor">
        <i class="fa fa-clock-o"></i> <span id="stopwatch" class="hidden">00:00:00</span> <span id="stopwatch-progress">00:00:00</span>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-7 top-row-large-font theme-button-color work-home-col">
        <div id="main-icon">
            <i class="@progressIcon hidden-sm hidden-xs" style="color:@progressColor"></i>
        </div>
        <div class="hw-switch-m-l">
            <input type="checkbox" class="js-switch timeRecordsSwitch" id="work-from-home" onchange="SetWorkFromHome();" />
            <label>@Loc.WorkFromHome</label>
        </div>
    </div>

    <div id="timerecord-col" class="col-md-8 col-sm-12 col-xs-12 timerecord-col">
        <div id="timerecord-buttons" class="timerecord-buttons">

            <div style="width:27px;">
                <span class="panner arrow-left" data-scroll-modifier="-1">
                    <i class="fa fa-chevron-left"></i>
                </span>
            </div>

            @foreach (var item in Model.EntryTypes.Select((value, i) => new { i, value }))
            {
                var value = item.value;
                var index = item.i;

                if (value.Show)
                {
                    <button id="record-button-@index"
                            data-work-home="@value.IsWorkFromHome"
                            class="btn btn-sm text-center entry-type-button @(value.InProgress ? "set-in-progress" : string.Empty) check-work-place"
                            data-milliseconds="@value.Milliseconds"
                            onclick="startRecording('@canUpdate', '@index', '@value.SetOf')"
                            data-color="@value.BackgroundColor"
                            data-icon="fa @value.Icon">

                        <i class="fa @value.Icon" style="color:@value.BackgroundColor"></i>
                        <span style="display:block">@value.Name</span>
                    </button>
                }
            }
        </div>

        <span class="panner arrow-right" data-scroll-modifier="1">
            <i class="fa fa-chevron-right"></i>
        </span>

        <button id="stop-records"
                class="btn btn-sm text-center entry-type-button"
                onclick="stopTimeRecordings()">
            <i class="fas fa-home theme-button-color"></i>
            <span style="display:block">@Loc.Departure</span>
        </button>
    </div>
</div>
