{% extends 'admin/base_site.html' %}
{% load i18n static admin_urls %}

{% block extrastyle %}
  <link rel="stylesheet" type="text/css" href="{% static 'admin/css/skills-tags.css' %}"/>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans "Home" %}</a>
  &rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
  &rsaquo; {% if has_change_permission %}
    <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
  {% else %}
    {{ opts.verbose_name_plural|capfirst }}
  {% endif %}
  &rsaquo; {% if has_change_permission %}
    <a href="{% url opts|admin_urlname:'change' job.pk %}">
      {{ job|truncatewords:"18" }}
    </a>
  {% else %}
    {{ job|capfirst }}
  {% endif %}
  &rsaquo;
  {% trans "Job Skills" %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
    <div class="job-skills-wrapper grid">
        <div class="job-skill">
           <h1>{{ "Skills for "|add:job.name }}</h1>
           {% if job_skills %}
                <ul class="item">
                    {% for skill in job_skills %}
                    <li class="list-item" data-skill-id="{{ skill.id }}">
                        <a class="black">
                            {{ skill.name }}
                        </a>
                        <span class="remove" title="Remove this skill from the list.">x</span>
                    </li>
                    {% endfor %}
                </ul>
            {% else %}
                <ul class="item">
                </ul>
            {% endif %}
        </div>
        <hr class="vertical" />
        <div class="excluded-skills">
            <h1>{{ "Excluded Skills for "|add:job.name }}</h1>
           {% if excluded_job_skills %}
                <ul class="item">
                    {% for skill in excluded_job_skills %}
                    <li class="list-item" data-skill-id="{{ skill.id }}">
                        <a class="black">
                            {{ skill.name }}
                        </a>
                        <span class="remove" title="Remove this skill from the list.">x</span>
                    </li>
                    {% endfor %}
                </ul>
            {% else %}
                <ul class="item">
                </ul>
            {% endif %}

        </div>
    </div>
    <br />
    <div class="forms-panel">
        <form action="" method="post" enctype="multipart/form-data" id="exclude-skills-form">
            {% csrf_token %}
            <div style="display: none">
                {{ exclude_skills_form.as_p }}
            </div>
            <div class="submit-row">
              <input style="float: right" type="submit" class="default" value="Save"/>
            </div>
        </form>
    </div>

 </div>

{% endblock %}

{% block footer %}
  {{ block.super }}
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="{% static 'admin/js/job-skills-admin.js' %}"></script>
{% endblock %}