{namespace e=Medienreaktor\Energize\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:layout name="Content" />

<f:section name="Main">
    <e:recruitee as="data" companyID="{data.pi_flexform.company_id}" companyName="{data.pi_flexform.company_name}" apiKey="{data.pi_flexform.api_key}">
        <f:if condition="{data.offerDetail}">
            <f:then>
                <f:render section="OfferDetail" arguments="{_all}" />
            </f:then>
            <f:else>
                <f:render section="OfferList" arguments="{_all}" />
            </f:else>
        </f:if>
    </e:recruitee>
</f:section>


<f:section name="OfferDetail">
    <div class="row">
        <div class="col-12 col-lg-8">
            <h1>{data.offerDetail.title}</h1>

            <f:format.raw>{data.offerDetail.description}</f:format.raw>
            <f:format.raw>{data.offerDetail.requirements}</f:format.raw>
        </div>
        <div class="col-12 col-lg-4">
            <ul>
                <li>{data.offerDetail.department} <f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.department"></f:translate></li>
                <li>{data.offerDetail.max_hours} <f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.hours"></f:translate></li>
                <li>{data.offerDetail.location}</li>
            </ul>
            <a class="btn btn-primary btn-lg" href="{data.offerDetail.url}/c/new">
                Jetzt bewerben
            </a>
        </div>
    </div>
</f:section>

<f:section name="OfferList">

    <div class="mb-4 mb-lg-5">
        <form class="job-filter-form">

            <div class="form-group mb-4">
                <label class="d-block h6"><f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.filterheadlines" /></label>
                <input type="text" placeholder="Berufsbezeichnung" value="" class="live-search-box form-control" />
            </div>

            <div class="row">
                <f:for as="filter" key="filtertype" each="{data.filter}">
                    <div class="col-12 col-lg-4 mb-3">

                        <div class="form-group">
                            <label class="h6"><f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.filter.label.{filtertype}" /></label>
                            <div class="select-single-wrapper">
                                <select name="{filtertype}" class="form-control d-block">
                                    <option value="0"><f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.all" /></option>
                                    <f:for as="filteritem" key="key" each="{filter}">
                                        <option value="{filteritem}"><f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.filter.option.{filteritem}" default="{filteritem}" /></option>
                                    </f:for>
                                </select>
                            </div>
                        </div>

                    </div>
                </f:for>
            </div>

        </form>
    </div>

    <div class="selectedfilter d-none">

    </div>

    <div class="job-list">

        <f:for as="offer" each="{data.allJobs}">

            <f:if condition="{offer.title} && {offer.status} == 'published'">

                <div class="{offer.employment_type} job-item mb-4 pb-4" data-companys="{offer.company.name}" data-departments="{offer.department}" data-citys="{offer.city}" data-employmentType="{offer.employment_type}">

                    <p class="kicker job-department">{offer.department}</p>
                    <a class="d-flex align-items-center text-dark text-hover-primary job-headline" href="{offer.url}" title="{offer.title}">
                        <h4 class="flex-grow-1 job-title">{offer.title}</h4>
                        <div class="px-3">
                            <span class="icon-more text-primary"></span>
                        </div>
                    </a>

                    <p class="mb-0">
                        <f:if condition="{offer.city}">
                            <span class="mr-4 mb-2 job-city"><i class="fal fa-map mr-2"></i>{offer.city}</span>
                        </f:if>
                        <f:if condition="{offer.employment_type}">
                            <span class="job-employment-type"><i class="fal fa-stopwatch mr-2"></i><f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.filter.option.{offer.employment_type}" default="{offer.employment_type}" /></span>
                        </f:if>
                    </p>


                </div>
            </f:if>
        </f:for>

        <div class="d-none no-results">
            <p class="strong"><f:translate key="LLL:EXT:energize/Resources/Private/Language/locallang.xlf:jobs.noresult" /></p>
        </div>
    </div>

</f:section>