<div class="row document-head">
    <div class="col-md-2 col-sm-12 col-xs-12" id="selectedEmployee">
        <div class="row dt-worker-row">
            <div class="col-md-2 col-sm-1 col-xs-2 emp-avatar" id="selectedEmployeeAvatar">
                <div class="dt-text-avatar hidden" id="employeeAvatarText"></div>
                <img class="dt-image-circle hidden" id="employeeAvatarImg" />
            </div>
            <div class="col-md-10 col-sm-11 col-xs-10 emp-data" id="employeeData">
                <span class="worker-fullname" id="employeeName"></span>
                <span class="text-muted" id="employeeSubtext"></span>
            </div>
        </div>
    </div>

    <div class="col-md-2 col-sm-12 col-xs-12">
        <div class="form-group show-tick form-control">
            <label class="control-label">@Loc.Period @Loc.From.ToLower()</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                @Html.TextBox("DateStart", null,
                    new { @id = "Filter_DateFrom", @class = "form-control custom-monthpicker", @autocomplete = "off" })
            </div>
        </div>
    </div>

    <div class="col-md-2 col-sm-12 col-xs-12">
        <div class="form-group show-tick form-control">
            <label class="control-label">@Loc.Period @Loc.To.ToLower()</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                @Html.TextBox("DateEnd", null,
                    new { @id = "Filter_DateTo", @class = "form-control custom-monthpicker", @autocomplete = "off" })
            </div>
        </div>
    </div>

    <div class="invisible"></div>
</div>