{% extends 'editorial_staff/base.html' %}

{% load staticfiles %}

{% block html_title %}Staff management | {{ block.super }}{% endblock %}

{% block aside_shown %}shown{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{% static 'editorial_staff/css/main.css' %}">
{% endblock %}


{% block back_nav %}{% endblock %}

{% block nav_header %}Staff management{% endblock nav_header %}

{% block scripts %}
<script type="text/javascript" src="{% static 'editorial_staff/js/staffer.list.js' %}" > </script>

<script>
// var options = {
//     valueNames: [ 'name' ],
//     page: 10,
//     plugins: [
//       ListPagination({})
//     ]
// };
//
// var staffList = new List('staff-list', options);
</script>

{% endblock %}

{% block content %}
<div class="top-prompts">
    <div class="top-pagination-links"></div>

    <div class="add-button">
        <a href="{% url 'editorial_staff:staffer-create' %}" title="Add new staffer">
            <div class="btn btn-primary view-action">Create staffer</div>
        </a>
    </div>
</div>

<ul class="raw-list">
    {% for staffer in staff %}
    <li class="tabular-list-item">
        <a href="{% url 'editorial_staff:staffer-edit' staffer.pk %}">
            <div class="card-content with-images">
                <div class="image">
                    <img src="{% if staffer.image_url %}{{ staffer.image_url }}{% else %}{% static 'editorial_staff/img/smiley.png' %}{% endif %}" />
            		</div>
                <div class="multi-line image-adjust">
                    <h6>{{ staffer.first_name }} <span class="last-name">{{ staffer.last_name }}</span></h6>
                    <p>{% if staffer.active %}{{ staffer.email }}{% else %}<em>Deactivated user</em>{% endif %}</p>
                </div>
            </div>
        </a>
    </li>
    {% endfor %}
</ul>

<div class="paginated-lists"></div>

<div class="pagination-links"></div>
{% endblock %}


{% block sidebar %}
<div class="sidebar-header">
    <h5>New faces</h5>
</div>

<div class="sidebar-scroll-contents">
    <ul>
        {% for addition in latest_additions %}
        <li class="added-staffer">
            <div class="time-kicker">{{ addition.created|date:"N j" }}</div>
            <div class="staffer-addition-details activity-item">
                <a class="activity-link" href="{% url 'editorial_staff:staffer-edit' addition.pk %}">
                    <div class="image">
                        <img src="{% if addition.image_url %}{{ addition.image_url }}{% else %}{% static 'editorial_staff/img/smiley.png' %}{% endif %}" />
                    </div>
                    <div class="staffer-information image-adjust">
                        <div class="first-line">Byline added: <span class="staffer-name strong">{% if not addition.first_name and not addition.last_name %}Anonymous user{% else %}{{ addition.first_name }} {{ addition.last_name }}{% endif %}</span><i class="material-icons edit-icon">edit</i></div>
                        <div class="second-line"><i class="material-icons">email</i>{{ addition.email }}</div>
                    </div>
                </a>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>

{% endblock %}
