## =============================================================================
## Velocity template
## =============================================================================
##
## This template is used to render the details of the requested job-listing.
##
## In this template you have access to the $apiData, containing the response from the API.
## You also have access to $endecUtil,$settings,$texts,$category,$department,$u,$employmentType,$query,$requestedJobId,$searchPageURL  
## For example: apiData.description give you all the HTML for the current position
## =============================================================================

<div class="lp-varbi-jobpage">
  <h1 class="heading lp-varbi-jobpage__heading">${apiData.title}</h1>
  #if ($apiData.top_image_link)
    <div class="lp-varbi-image-wrapper">
      <img class="lp-varbi-image" src="${apiData.top_image_link}" alt="${apiData.top_image_alt_text}"/>
    </div>
  #end
  <div class="lp-varbi-jobpage__facts">
    <dl class="lp-varbi-jobpage__description-list">
        #if ($apiData.city) 
        <div class="lp-varbi-jobpage__description-row">
          <dt class="lp-varbi-jobpage__description-name">Ort:</dt>
          <dd class="lp-varbi-jobpage__description-value">$apiData.city</dd>
        </div>
        #end
        #if ($apiData.departments && $apiData.departments.length>0) 
        <div class="lp-varbi-jobpage__description-row">
          <dt class="lp-varbi-jobpage__description-name">Förvaltning eller bolag:</dt>
          <dd class="lp-varbi-jobpage__description-value">$apiData.departments[0].name</dd>
        </div>
        #end
        #if ($apiData.dept && (!$apiData.departments || $apiData.departments.length==0 || $apiData.dept != $apiData.departments[0].name)) 
        <div class="lp-varbi-jobpage__description-row">
          <dt class="lp-varbi-jobpage__description-name">Avdelning:</dt>
          <dd class="lp-varbi-jobpage__description-value">$apiData.dept</dd>
        </div>
        #end
        #if ($apiData.type) 
        <div class="lp-varbi-jobpage__description-row">
          <dt class="lp-varbi-jobpage__description-name">Anställningsform:</dt>
          <dd class="lp-varbi-jobpage__description-value">$apiData.type
          #if ($apiData.projectends) till och med: $apiData.projectends #end </dd>
        </div>
        #end
        #if ($apiData.hours) 
        <div class="lp-varbi-jobpage__description-row">
          <dt class="lp-varbi-jobpage__description-name">Anställningens omfattning:</dt>
          <dd class="lp-varbi-jobpage__description-value">$apiData.hours</dd>
        </div>
        #end
        #if ($apiData.ends) 
        <div class="lp-varbi-jobpage__description-row">
          <dt class="lp-varbi-jobpage__description-name">Sista ansökningsdag:</dt>
          <dd class="lp-varbi-jobpage__description-value">$apiData.ends</dd>
        </div>
        #end
    </dl>
    <a class="env-button env-button--primary lp-varbi-jobpage__button lp-varbi-jobpage__button--apply" href="${apiData.loginAndApplyURI}" class="lp-varbi-apply-button">Sök tjänsten</a>
  </div>
  <div class="lp-expandable-content lp-varbi-position__more-info">
    <h2 class="subheading">Mer information om tjänsten</h2>
    <div class="lp-varbi-position-more-info__content" id="moreInfo">
        <dl class="lp-varbi-jobpage__description-list">
          #if ($apiData.ref_nr) 
            <div class="lp-varbi-jobpage__description-row">
              <dt class="lp-varbi-jobpage__description-name">Referensnummer:</dt>
              <dd class="lp-varbi-jobpage__description-value">$apiData.ref_nr</dd>
            </div>
          #end
          #if ($apiData.published) 
            <div class="lp-varbi-jobpage__description-row">
              <dt class="lp-varbi-jobpage__description-name">Publicerad:</dt>
              <dd class="lp-varbi-jobpage__description-value">$apiData.published</dd>
            </div>
          #end
          #if ($apiData.position_contact && $apiData.position_contact.length>0)
            <div class="lp-varbi-jobpage__description-row">
              <dt class="lp-varbi-jobpage__description-name">Kontakt:</dt>
              <dd class="lp-varbi-jobpage__description-value">$apiData.position_contact[0][0], $apiData.position_contact[0][1], $apiData.position_contact[0][2]</dd>
            </div>
          #end
          #if ($apiData.union_representative && $apiData.union_representative.length>0)
            <div class="lp-varbi-jobpage__description-row">
              <dt class="lp-varbi-jobpage__description-name">Facklig företrädare:</dt>
              <dd class="lp-varbi-jobpage__description-value">$apiData.union_representative[0][0] $apiData.union_representative[0][1], $apiData.union_representative[0][2]</dd>
            </div>
          #end
          #if ($apiData.admission) 
            <div class="lp-varbi-jobpage__description-row">
              <dt class="lp-varbi-jobpage__description-name">Tillträde:</dt>
              <dd class="lp-varbi-jobpage__description-value">$apiData.admission</dd>
            </div>
          #end
        </dl>
    </div>
  </div>
  
  <div class="lp-varbi-jobpage__content sv-use-margins">
  ${apiData.descs.department1}
  </div>
  
  <div class="lp-varbi-jobpage__content sv-use-margins">
  ${apiData.description}
  </div>
  
  <div class="lp-varbi-jobpage__content sv-use-margins">
  
  ${apiData.descs.footer}
  <h3>Om oss</h3>
  ${apiData.descs.department1Footer}
  </div>

  <div class="lp-varbi-cta-bottom-wrapper">
    <a class="env-button env-button--primary lp-varbi-back-to-list-link" href="${searchPageURL}?category=${category}&employmentType=${employmentType}&query=${query}&view=card">Tillbaka till listningen</a>
    <a class="env-button env-button--primary lp-varbi-jobpage__button lp-varbi-jobpage__button--apply" href="${apiData.loginAndApplyURI}" class="lp-varbi-apply-button">Sök tjänsten</a>
  </div>
</div>

#if ($showRawData)
  $apiDataRaw
#end