{% extends "templates/base.html" %}
{% block title %}{{ _(job.job_title) }}{% endblock %}

{% block head_include %}
{% include "public/icons/symbol-defs.svg" %}
{% endblock %}

{% block content %}

<div class="common-page-style">
  <div class="container">
    {{ BreadCrumb(job) }}
    <div class="common-card-style job-detail-card">

      <div class="d-flex">
          <div class="avatar avatar-medium align-self-center" title="{{ job.company_name}}">
            <div class="avatar-frame company-logo" style="
              background-image: url( {{ job.company_logo | urlencode }} );"></div>
          </div>
          <div class="ml-5">
            <div class="vertically-center">
              <div class="course-home-headings mb-0">{{ _(job.job_title) }}</div>
              <div class="indicator-pill green ml-5"> {{ job.type }} </div>
            </div>
            <div class="d-flex align-items-center mb-2">
              <a class="dark-links course-meta mr-5" href="{{ job.company_website }}">{{ job.company_name }}</a>
              <div class="vertically-center course-meta mr-5">
                <svg class="icon icon-sm">
                  <use class="" href="#icon-location">
                </svg>
                <div>{{ job.location }}</div>
              </div>
              <div class="course-meta"> {{ frappe.utils.format_date(job.creation, "medium") }} </div>
            </div>
          </div>

        {% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
        <div class="d-flex align-items-start ml-auto">
          <a class="button is-primary mr-2"
          href="{{ application_link }}">{{ _("Apply") }}</a>
          <div class="button is-default mr-2" id="report" data-job="{{ job.name }}">{{ _("Report") }}</div>
          {% if job.owner == frappe.session.user %}
          <a class="button is-default button-links" href="/job-opportunity?name={{ job.name }}">Edit</a>
          {% endif %}
        </div>
    </div>

    <div class="course-meta mt-10">{{ _(job.description) }}</div>

  </div>
</div>

<div class="modal fade report-modal" id="report-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="font-weight-bold">{{ _("Report this Post") }}</div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="review-form" id="review-form">
          <div class="form-group">
            <div class="clearfix">
              <label class="control-label reqd" style="padding-right: 0px;">{{ _("Reason for reporting") }}</label>
            </div>
            <div class="control-input-wrapper">
              <div class="control-input">
                <textarea type="text" autocomplete="off" class="input-with-feedback form-control report-field"
                  data-fieldtype="Text" data-fieldname="feedback_comments" placeholder="" style="height: 200px;"
                  spellcheck="false"></textarea>
              </div>
            </div>
          </div>
          <p class="error-field muted-text"></p>
        </form>
      </div>
      <div class="modal-footer">
        <div class="button submit-review is-primary" data-job="{{ job.name }}" id="submit-report">
          Report</div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% macro BreadCrumb(job) %}
<div class="breadcrumb">
  <a class="dark-links" href="/jobs">{{ _("Job Openings") }}</a>
  <img class="ml-1 mr-1" src="/assets/school/icons/chevron-right.svg">
  <span class="breadcrumb-destination">{{ job.job_title }}</span>
</div>
{% endmacro %}