@using Kreta.Web.Areas.Tanulo.Models

@model TanuloApaczaiPalyazatiEsemenyekModel

@{ var counter = 0; }

<style>
    .esemenyek-container {
        background-color: #e5e9ec;
    }

    .mk-timeline {
        overflow: hidden;
        max-width: 40px;
    }

        .mk-timeline .mk-line {
            margin-bottom: -99999px;
            padding-bottom: 99999px;
            width: 4px;
            background-color: white;
            position: relative;
            float: right;
            margin-right: 6px;
        }

        .mk-timeline .mk-circle {
            width: 16px;
            height: 16px;
            background-color: #30A8CB;
            z-index: 20;
            position: relative;
            margin-top: 20px;
            float: right;
            border: 2px solid white;
            border-radius: 999px;
            z-index: 20;
        }

    .mk-content {
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: white;
        box-shadow: 0 1px 1px 0 #e0e0e0;
        margin-right: 15px;
        border-radius: 2px;
    }

        .mk-content .subject {
            min-height: 36px;
            background-color: white;
            padding: 10px;
            margin: 0 -20px;
        }

            .mk-content .subject h4 {
                margin: 0;
                color: #445261;
                font-weight: 400;
            }

        .mk-content .content {
            padding: 15px 10px 15px 10px;
            margin: 0 -15px;
            border-bottom: 1px solid #e5e9ec;
        }

    .highlighted .subject h4 {
        font-weight: bold;
    }

    .mk-left {
        text-align: right;
        margin-left: 15px;
    }

    .mk-empty {
        margin-right: 15px;
    }
</style>

<div class="container-fluid esemenyek-container">
    @foreach (var merfoldko in Model.Merfoldkovek)
    {
        var isLeft = counter % 2 == 0;

        <div class="highlighted row row-eq-height">

            <div class="mk-left col-xs-5 @(isLeft ? "mk-content" : "mk-empty")">
                @if (isLeft)
                {
                    <div class="subject" style="background-color: @merfoldko.StatuszColor;">
                        <h4>@merfoldko.Cim - @merfoldko.Datum.ToShortDateString()</h4>
                    </div>
                    <div class="content">@merfoldko.Megjegyzes</div>
                }
            </div>

            <div class="mk-timeline col-xs-1">
                <div class="mk-line"></div>
                <div class="mk-circle"></div>
            </div>

            <div class="col-xs-5 @(!isLeft ? "mk-content" : "mk-empty")">
                @if (!isLeft)
                {
                    <div class="subject" style="background-color: @merfoldko.StatuszColor;">
                        <h4>@merfoldko.Cim - @merfoldko.Datum.ToShortDateString()</h4>
                    </div>
                    <div class="content">@merfoldko.Megjegyzes</div>
                }
            </div>

        </div>
        counter++;
    }
</div>