{% 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="job-detail-header">
                    <span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
                    class="company-logo"></span>

                    <div class="job-card-info">
                        <div class="job-card-heading">{{ _(job.job_title) }}</div>
                        <div class="job-company course-meta">
                            <div class="mr-5">{{ job.company_name }}</div>

                            <div class="vertically-center">
                                <svg class="icon icon-sm">
                                    <use class="" href="#icon-location">
                                </svg>
                                {{ job.location }}
                            </div>
                        </div>

                        <div class="job-card-logo-section course-meta">
                            <div class="indicator-pill green mr-5"> {{ job.type }} </div>
                            <div class="text-muted">{{ 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="job-actions">
                        <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>

<div class="modal fade report-modal" id="report-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <div class="modal-title">{{ _("Report this Post") }}</div>
            </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" spellcheck="false"></textarea>
                            </textarea>
                        </div>
                    </div>
                </div>
                <p class="error-field muted-text"></p>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary btn-sm mr-2 pull-right" data-dismiss="modal" aria-label="Close">
                    {{ _("Discard") }}
                </button>

                <div class="btn btn-primary btn-sm pull-right" 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/lms/icons/chevron-right.svg">
  <span class="breadcrumb-destination">{{ job.job_title }}</span>
</div>
{% endmacro %}
