{% extends "administrator/base.html" %}

{% block sidebar %}

<a href="#addAlbum" data-toggle="modal" class="btn btn-success full">Add Album</a>

{% endblock sidebar %}

{% block main_content %}
<div class="modal hide fade" id="addAlbum">
    <div class="modal-header">
      <a data-dismiss="modal" class="close">×</a>
      <h3>Add Album</h3>
    </div>
    <div class="modal-body">
      <form method="POST" action="">
      {% csrf_token %}
      <label>Title</label>
      <input type="text" name="title" class="span5">
      <label>Description</label>
      <textarea class="span5" name="description"></textarea>
      <label>Parent Album</label>
      {{ album_form.parent_album }}
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn" href="#">Close</a>
      <input type="submit" value="Add Album" class="btn btn-primary">
      
    </div>
    </form>
  </div>
  
<div class="modal hide fade" id="chooseLocation">
    <div class="modal-header">
      <a data-dismiss="modal" class="close">×</a>
      <h3>Choose Location</h3>
    </div>
    <div class="modal-body">
      <h4>Select Album and Location</h4>
      <p>Select the album and location that you want to associate you uploaded photos with.</p>
      <form method="GET" action="{% url choose %}">
      <label>Album Name:</label>
          <select name="album">
              {% for album in form_albums %}
              <option value="{{ album.slug }}">{{ album.title }}</option>
              
          {% endfor %}
          
          </select>
          <input type="hidden" name="user_id" value="{{ request.user.id }}">
          
          <label>Location</label>
          <select name="location">
              {% for location in form_locations %}
              <option value="{{ location.slug }}">{{ location }}</option>
              
          {% endfor %}
          
          </select>

      
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn" href="#">Close</a>
      <input type="submit" value="Proceed to Upload" class="btn btn-primary">
      
    </div>
    </form>
  </div>

<div class="page-header">
<h2>Albums</h2>
</div>
<table class="table table-striped">

    <thead>
        <tr>
            <th>Album Name</th>
            <th>Parent Album</th>
            <th>Photo Count</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    {% for album in albums %}
    {% load thumbnail %}
    {% thumbnail album.get_album_cover.image "240x165" as im %}
        <tr title="{{ album }}" data-content="<img src='{{ im.url }}'>" class="pop">
    {% endthumbnail %}
            <td>{{ album }}</td>
            <td>{% if album.parent_album %}<span class="label label-success">Yes</span>{% else %}<span class="label label-important">No</span>{% endif %} </td>
            <td>{{ album.count }}</td>
            <td>
                <!-- Add child album -->
                <div class="modal hide fade" id="addPhotosToAlbum_{{ album.id }}">
                    <div class="modal-header">
                        <a data-dismiss="modal" class="close">×</a>
                        <h3>Choose Location</h3>
                    </div>
                    <div class="modal-body">
                        <h4>Select Location for photos in {{ album }}</h4>
                        <p>Select the location that you want to associate you uploaded photos with.</p>
                        <form method="GET" action="{% url choose %}">

                            <input type='hidden' name='album' value='{{ album.slug }}'>
                            <input type="hidden" name="user_id" value="{{ request.user.id }}">

                            <label>Location</label>
                            <select name="location">
                                {% for location in form_locations %}
                                <option value="{{ location.slug }}">{{ location }}</option>
                                {% endfor %}
                            </select>
                    </div>
                    <div class="modal-footer">
                        <a data-dismiss="modal" class="btn" href="#">Close</a>
                        <input type="submit" value="Proceed to Upload" class="btn btn-primary">

                    </div>
                    </form>
                </div>

                <div class="btn-group">
                    <button class="btn btn-primary">Actions</button>
                    <button class="btn dropdown-toggle btn-primary" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="{% url admin_album_detail album_id=album.id %}">Edit</a></li>
                        <li><a href="#">View Photos</a></li>
                        <li><a href="#addPhotosToAlbum_{{ album.id }}" data-toggle="modal">Add Photos</a></li>
                        <!-- dropdown menu links -->
                        <li class="divider"></li>
                        <li><a href="#addChildAlbum_{{ album.id }}" data-toggle="modal">Add Child Album</a></li>
                    </ul>
                </div>
            </td>
        </tr>

    {% endfor %}

    </tbody>

</table>

{% endblock main_content %}

{% block navigation %}
{% include "administrator/nav.html" with nav=2 %}
{% endblock %}
{% block extra_foot %}
<script>
    $(document).ready(function(){
        $('.pop').popover({
            placement: 'left',
            delay: {'show': 1000, hide: 200}
        })

    });
</script>
{% endblock extra_foot %}