{% extends "base.html" %}{% load crispy_forms_tags sekizai_tags cache staticfiles %}
{% block title %}Update - {{ activity.title }}{% endblock title %}
{% block content %}
{% addtoblock "css" %}
    <link rel="stylesheet" href="{% static 'css/activity.css' %}">
{% endaddtoblock %}
<div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Uploading...</h4>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <aside class="col-sm-4">
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action">Edit Activity</a>
            <a href="#" class="list-group-item list-group-item-action active">Edit Images</a>
            <a href="#" class="list-group-item list-group-item-action">FareHarbor Dashboard</a>
            <a href="#" class="list-group-item list-group-item-action">View Activity</a>
        </div>
    </aside>
    <article class="single-activity col-sm-8">
        <button type="button" class="btn btn-primary upload-activity-photos">
            Upload photos
        </button>
        <input id="fileupload" type="file" name="photo" multiple
            style="display: none;"
            data-url="{% url 'activities:upload' activity.slug activity.region activity.pk %}"
            data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'
        >
        <table id="gallery" class="table table-bordered">
            <thead><tr><th>Photo</th></tr></thead>
            <tbody>
                {% for photo in photos %}
                <tr><td><a href="{{ photo.image.url }}">{{ photo.image.name }}</a></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </article>
</div>
{% endblock content %}
{% block scripts %}
<script src="{% static 'js/jquery-file-upload/vendor/jquery.ui.widget.js' %}"></script>
<script src="{% static 'js/jquery-file-upload/jquery.iframe-transport.js' %}"></script>
<script src="{% static 'js/jquery-file-upload/jquery.fileupload.js' %}"></script>
<script src="{% static 'js/image-upload.js' %}"></script>
{% endblock scripts %}