@using Kreta.Web.Areas.OsztalyCsoport.Models
@model TanuloSorolasModel

<div>
    @foreach (var item in Model.Lista)
    {
    <div class="row" style="padding-bottom: 2px;">
        <div class="col-xs-2 studentNameDiv">
            @Html.Label(item.Nev, new { data_Id = item.Id })
        </div>
        <div class="col-xs-6 col-sm-6">
            @{
                foreach (TanuloSorolasDivModel div in @item.Intervallumok)
                {
                    if (div.Blank)
                    {
                        <div class="whiteDiv" style="width: @div.WidthPercent%;">&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%;">&nbsp;</div>
                    }
                }
            }
        </div>
    </div>
    }
    <div class="row" style="padding-bottom: 2px;">
        <div class="col-xs-2"></div>
        @foreach (var item in Model.DatumLista)
        {
            <div class="col-xs-@item.ColNumber">@item.Date.ToString("yyyy.MM.dd.")</div>
        }
    </div>
</div>

<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;
    }
</style>