[TASK] List locations in job teasers

Resources/Private/Language/de.locallang.xlf

@@ -474,6 +474,10 @@
 				<source><![CDATA[Vacancies worldwide]]></source>
 				<target><![CDATA[Offene Stellen weltweit]]></target>
 			</trans-unit>
+			<trans-unit id="frontend.remote" approved="yes">
+				<source><![CDATA[Remote]]></source>
+				<target><![CDATA[Remote]]></target>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>

Resources/Private/Language/locallang.xlf

@@ -381,6 +381,9 @@
 			<trans-unit id="frontend.certificateUplodadButton">
 				<source><![CDATA[Upload certificate]]></source>
 			</trans-unit>
+			<trans-unit id="frontend.remote">
+				<source><![CDATA[Remote]]></source>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>

Resources/Private/Partials/Job.html

 <div class="col-md-6 col-sm-6 col-cs-12">
 	<div class="default-content-element">
-		<f:link.action class="sg-jobs-job sg-card sg-card-shadow" id="offer-{job.uid}" pageUid="{settings.applyPage}" controller="Joblist" action="applyForm"
-				pluginName="JobApplication" arguments="{jobId: job.uid}">
+		<f:link.action class="sg-jobs-job sg-card sg-card-shadow" id="offer-{job.uid}" pageUid="{settings.applyPage}"
+					   controller="Joblist" action="applyForm"
+					   pluginName="JobApplication" arguments="{jobId: job.uid}">
 			<div class="default-content-element default-header-element sg-card-title">
 				<h2 class="h2">{job.title}</h2>
 			</div>
@@ -16,25 +17,22 @@
 				<div class="sgjobs-highlight-area">
 					<ul class="default-list">
 						<li>
-							<f:format.raw><f:translate key="frontend.jobStart" /></f:format.raw>
+							<f:format.raw><f:translate key="frontend.jobStart"/></f:format.raw>
 							<f:if condition="{job.alternativeStartDate}">
 								<f:then>
 									{job.alternativeStartDate}
 								</f:then>
 								<f:else>
-									<f:format.date date="{job.startDate}" format="d.m.Y" />
+									<f:format.date date="{job.startDate}" format="d.m.Y"/>
 								</f:else>
 							</f:if>
 						</li>
 						<li>
-							<f:if condition="!{job.telecommutePossible}">
-								<f:then>
-									<f:format.raw><f:translate key="frontend.locationLabel"/></f:format.raw><br>
-									{job.companies -> f:count()}&nbsp;<f:translate key="frontend.locationCountLabel"/>
-								</f:then>
-								<f:else>
-									<f:format.raw><f:translate key="frontend.jobLocationRemote"/></f:format.raw>
-								</f:else>
+							<f:for each="{job.companies}" as="company" iteration="iterator">
+								{company.city}{f:if(condition: '!{iterator.isLast} || {iterator.isLast} && {job.telecommutePossible} ', then: ', ')}
+							</f:for>
+							<f:if condition="{job.telecommutePossible}">
+								<f:translate key="frontend.remote" />
 							</f:if>
 						</li>
 					</ul>
@@ -43,7 +41,7 @@
 			</f:if>
 			<div class="default-content-element sg-cta sg-cta-with-icon sg-cta-stretch">
 				<div class="btn btn-warning btn-lg">
-					<f:format.raw><f:translate key="frontend.jobDetailsCta" /></f:format.raw>
+					<f:format.raw><f:translate key="frontend.jobDetailsCta"/></f:format.raw>
 				</div>
 			</div>
 		</f:link.action>

Resources/Private/Partials/Teaser.html

@@ -27,14 +27,11 @@
 							</f:if>
 						</li>
 						<li>
-							<f:if condition="!{job.telecommutePossible}">
-								<f:then>
-									<f:format.raw><f:translate key="frontend.locationLabel"/></f:format.raw><br>
-									{job.companies -> f:count()}&nbsp;<f:translate key="frontend.locationCountLabel"/>
-								</f:then>
-								<f:else>
-									<f:format.raw><f:translate key="frontend.jobLocationRemote"/></f:format.raw>
-								</f:else>
+							<f:for each="{job.companies}" as="company" iteration="iterator">
+								{company.city}{f:if(condition: '!{iterator.isLast} || {iterator.isLast} && {job.telecommutePossible} ', then: ', ')}
+							</f:for>
+							<f:if condition="{job.telecommutePossible}">
+								<f:translate key="frontend.remote" />
 							</f:if>
 						</li>
 					</ul>