@using Kreta.Framework
@using Kreta.Web.Areas.OsztalyCsoport.Models
@using Kreta.Resources;
@model TanuloSorolasModel

<div>
    @if (Model.Lista.Count > 0)
    {
        if (Model.Lista.Any(x => x.IsDualisCsoportbanTanuloKepzohelyEsAdoszamNelkul))
        {
            <div class="row">
                <div class="col-xs-8">
                    <label class="redFontColor">@(Html.Raw(OsztalyCsoportResource.KeremAKiemeltTanulokDualisKepzohelyiBesorolasatEllenorizze))</label>
                </div>          
            </div>
        }

        foreach (var item in Model.Lista)
        {
            <div class="row" style="padding-bottom: 2px;">
                <div class="col-xs-4 studentNameDiv">
                    <label class="@(item.IsDualisCsoportbanTanuloKepzohelyEsAdoszamNelkul? "redFontColor" : string.Empty)" style="margin-top: 5px" data-id="@item.Id">@item.Nev</label>
                </div>
                <div class="col-xs-8 col-sm-8">
                    @{
                        foreach (TanuloSorolasDivModel div in @item.Intervallumok)
                        {
                            if (div.Blank)
                            {
                                <div class="whiteDiv" style="width: @div.WidthPercent%; margin-top: 5px;">&nbsp;</div>
                            }
                            else
                            {
                                <div class="colorDiv" title="@(div.StartDate.HasValue ? div.StartDate.Value.ToString("yyyy.MM.dd.") : string.Empty) - @( div.EndDate.HasValue ? div.EndDate.Value.ToString("yyyy.MM.dd.") : string.Empty )" style="width: @div.WidthPercent%; margin-top: 5px;">&nbsp;</div>
                            }
                        }
                    }
                </div>
            </div>
        }
    }
    else
    {
        <div class="k-grid-norecords">
            <div class="k-grid-norecords-template">
                @StringResourcesUtils.GetString(155)
            </div>
        </div>
    }
    <div class="row" style="padding-bottom: 2px;">
        <div class="col-xs-4"></div>
        @foreach (var item in Model.DatumLista)
        {
            var textalign = item == Model.DatumLista.First() ? "left" : (item == Model.DatumLista.Last() ? "right" : "center");
            <div class="col-xs-@item.ColNumber" style="text-align:@textalign">@item.Date.ToString("yyyy.MM.dd.")</div>
        }
    </div>
</div>

@if (!Model.IsInfoView)
{
    <script type="text/javascript">
        $(document).ready(function () {
            $(".studentNameDiv").click(function () {
                if (!$(this).hasClass('selectedRow')) {
                    $(this).addClass('selectedRow');
                }
                else {
                    $(this).removeClass('selectedRow');
                }
            });
        });
    </script>
}

<style type="text/css">
    .selectedRow {
        background: black;
        color: white;
    }

    .whiteDiv {
        background: #FFFFFF;
        border-radius: 10px;
        float: left;
    }

    .colorDiv {
        background: #406A7C;
        border-radius: 10px;
        float: left;
    }

    .redFontColor {
        color: red;
    }
</style>