@model PantheonRA.BackOffice.Models.TimeRecordFooter

<div class="row document-footer timerecords-footer">
    <div class="col-md-1 col-sm-4 col-xs-4 document-head-disabled-input">
        <div class="form-group">
            <label class="label-overflow">@Loc.AllowedLeave</label><br />
            <span class="timerecords-footer-left-span">@Model.GrantedLeaveDays @Loc.Days</span>
        </div>
    </div>

    <div class="col-md-1 col-sm-4 col-xs-4 document-head-disabled-input">
        <div class="form-group">
            <label class="label-overflow">@Loc.UsedLeave</label>
            <div class="leave-days-dropdown-icon leave-days-dropdown-button">
                <a role="button" data-toggle="dropdown" class="" id="leave-days-button">
                    <span class="default-icon-color"><i class="fa fa-info-circle"></i></span>
                </a>
                <ul class="dropdown-menu leave-days-info-menu">
                    <li class="leave-days-dropdown-list"><span>@Loc.PlannedLeave</span> <strong class="pull-right m-l-xs">@Model.PlannedLeaveDays @Loc.Days</strong></li>
                    <li class="leave-days-dropdown-list" style="border-bottom:1px solid;"><span>@Loc.AlreadyUsedLeave</span> <strong class="pull-right m-l-xs">@Model.AlreadyUsedLeaveDays @Loc.Days</strong></li>
                    <li class="leave-days-dropdown-list"><strong>@Loc.TotalUsedLeave <span class="pull-right m-l-xs">@Model.TotalLeaveDays @Loc.Days</span></strong></li>
                </ul>
            </div>
            <br />
            <span class="timerecords-footer-left-span">@Model.UsedLeaveDays @Loc.Days</span>
        </div>
    </div>

    <div class="col-md-1 col-sm-4 col-xs-4 document-head-disabled-input">
        <div class="form-group">
            <label class="label-overflow">@Loc.RemainingLeave</label><br />
            <span class="timerecords-footer-left-span">@Model.RemainingLeaveDays @Loc.Days</span>
        </div>
    </div>

    <div class="col-md-5 hidden-sm hidden-xs"></div>

    <div class="col-md-1 col-sm-3 col-xs-6 document-head-disabled-input">
        <div class="form-group">
            <label>@Loc.Planned</label><br />
            <span class="timerecords-footer-left-span">@Model.TotalPlanHours</span>
        </div>
    </div>
    <div class="col-md-1 col-sm-3 col-xs-6 document-head-disabled-input">
        <div class="form-group">
            <label>@Loc.Actual</label><br />
            <span class="timerecords-footer-left-span">@Model.ActualHours</span>
        </div>
    </div>
    <div class="col-md-1 col-sm-3 col-xs-6 document-head-disabled-input">
        <div class="form-group">
            <label>@Loc.Considered</label><br />
            <span class="timerecords-footer-left-span">@Model.ConsideredHours</span>
        </div>
    </div>

    <div class="col-md-1 col-sm-3 col-xs-6 document-head-highlight-input">
        <div class="form-group">
            <label>@Loc.Saldo</label>
            <span class="timerecords-footer-left-span">@Model.Saldo</span>
        </div>
    </div>
</div>