_VacancyList.cshtml

@inherits ToSic.Sxc.Dnn.RazorComponent
@using System;
@using System.Collections;
@using System.Linq;
@using System.Text.RegularExpressions;
@using DotNetNuke.Common;
@using ToSic.SexyContent;

<link rel="stylesheet" href="@App.Path/vacancies.css" />
<script src="@App.Path/vacancies.js" type="text/javascript" data-enableoptimizations="100"></script>

@if (Globals.IsEditMode()) {
	<div @Edit.TagToolbar(Header, settings: new { hover = "right" })>
        <p class="text-muted">@Header.Title</p>
	</div>
}

@foreach(var c in AsList (Data).OrderByDescending (c => c.PublishDate ?? c.Modified)) {
	<div @Edit.TagToolbar(c, settings: new { hover = "right" })>
    	<div class="card card-body mb-3">
    	    @{
    	        var publishDate = c.PublishDate ?? c.Modified;
    	    }
    	    <h4 class="card-title"><span class="badge badge-primary">@publishDate.ToShortDateString()</span> @c.Title</h4>
    	    <h5 class="card-subtitle mb-3">@c.CompanyName</h5>
			<button class="btn btn-sm btn-link text-muted text-right" type="button" data-toggle="collapse" data-target="#vacancy_collapse_@c.EntityId"
			    aria-expanded="false" aria-controls="vacancy_collapse_@c.EntityId">
				<span>@App.Resources.btnExpand <i class="fas fa-chevron-down"></i></span>
				<span class="d-none">@App.Resources.btnCollapse <i class="fas fa-chevron-up"></i></span>
			</button>
			<div id="vacancy_collapse_@c.EntityId" class="collapse vacancy-collapse">
				<div class="card card-body bg-light mt-3">
					<dl>
						@if (!string.IsNullOrEmpty (c.CompanyDesciption)) {
							<dt>@App.Resources.lblCompanyDescription</dt>
							<dd>@Html.Raw(c.CompanyDescription)</dd>
						}
						@if (!string.IsNullOrEmpty (c.Duties)) {
							<dt>@App.Resources.lblDuties</dt>
							<dd>@Html.Raw(c.Duties)</dd>
						}
						@if (!string.IsNullOrEmpty (c.Requirements)) {
							<dt>@App.Resources.lblRequirements</dt>
							<dd>@Html.Raw(c.Requirements)</dd>
						}
						@if (!string.IsNullOrEmpty (c.WorkingConditions)) {
							<dt>@App.Resources.lblWorkingConditions</dt>
							<dd>@Html.Raw(c.WorkingConditions)</dd>
						}
						<dt>@App.Resources.lblContacts</dt>
						<dd>@Html.Raw(c.Contacts)</dd>
					</dl>
				</div>
			</div>
    	</div>
	</div>
}