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

{% load bootstrap3 %}{% load staticfiles %}

{% block html_title %}Edit staffer '{{ staffer.render_full_name }}' | {{ block.super }}{% endblock %}

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

{% block body_class %}edit-staffer{% endblock %}

{% block nav_header %}Edit '{{ staffer.render_full_name }}'{% endblock nav_header %}

{% block nav_class %}disable-feed{% endblock %}

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

{% block content %}
<div class="form-holder loading-cover">
    <form class="first-child-adjust" method="post">
        {% bootstrap_form form layout='immaterial' %}
        {% csrf_token %}

        <div class="edit-actions">
            <div class="wrap">
                <div class="right-buttons">
                    <button id="save" class="btn btn-primary" type="submit" value="_save" name="submit">Save</button>
                    <!-- <input type="submit" class="prompt" value="Save" /> -->

                    <button id="save-and-continue" class="btn btn-primary-flat" type="submit" name="submit" value="_continue">Save & continue editing</button>
                </div>

                <div class="left-buttons">
                    <button id="rescrape-slack" class="btn btn-primary-flat" data-url="{% url "editorial_staff:api:staffer-rescrape" staffer.email %}">Rescrape Slack</button>
                    <!-- <div class="btn btn-primary">
                        <span class="button-inner button-text">Rescrape Slack</span>
                        <div class="ripple-container"></div>
                    </div> -->
                </div>
            </div>
        </div>
    </form>

    <div class="loading-label">
        <svg class="im-spinner" width="42px" height="42px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
            <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
        </svg>
        <p>Re-scraping user data from Slack...</p>
    </div>
</div>
{% endblock %}


{% block snackbars %}
<div class="snackbar"
     aria-live="assertive"
     aria-atomic="true"
     aria-hidden="true">
  <div class="snackbar-text">Text goes here.</div>
  <div class="snackbar-action-wrapper">
    <button type="button" class="btn snackbar-action-button">Dismiss</button>
  </div>
</div>
{% endblock %}
