{% extends "common/base.html" %}
{% load playlists_extras %}

{% block extrastyle %}
<link rel="stylesheet" href="/media/playlists/playlists.css" />
{% endblock %}

{% block extrahead %}
<script type="text/javascript" 
    src="/media/common/js/jquery/jquery-1.3.1.js"></script>
<script type="text/javascript" 
    src="/media/common/js/jquery-autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" 
    src="/media/common/js/chirp/chirp.js"></script>
<script type="text/javascript" 
    src="/media/playlists/js/playlists.js"></script>
{% endblock %}

{% block page_content %}

<div id="playlist"> <!-- site wrapper -->
<div id="form-column"> <!-- form column -->

<h1>CHIRPradio DJ Playlist Tracking Application</h1>

<form method="post" id="playlist-form" action="{% url playlists_add_event %}">
<fieldset>

{{ form.artist.errors }}
<label for="artist">Artist</label>
{{ form.artist }}
{{ form.artist_key }}

{{ form.song.errors }}
<label for="song">Song Title</label>
{{ form.song }}
{{ form.song_key }}

{{ form.album.errors }}
<label for="album">Album</label>
{{ form.album }}
{{ form.album_key }}

{{ form.label.errors }}
<label for="label">Label</label>
{{ form.label }}

{{ form.song_notes.errors }}
<label for="song_notes">Song Notes</label>
{{ form.song_notes }}

<input type="submit" class="button" name="submit" value="Submit" />
<input type="submit" class="button" name="submit" value="Add Break" />
<!--<input type="submit" class="button" name="populate" value="Fill form via Traktor" />-->

</fieldset>
</form>

</div> <!-- end form column -->
<div id="playlist-column"> <!-- playlist column -->

<h2>Artist &bull; Song Title &bull; Album &bull; Label</h2>

{% if playlist_events %}
{% for event in playlist_events %}

    {% if event.is_break %}

        <p class="break">Break</p>
    
    {% else %}
    
        <div class="song-info {% if event.is_new %}new{% endif %}"> <!-- song information container -->
        <p class="time">{{ event.established_display|time:"g:i A" }}</p>
        <p><span class="artist">{{ event.artist_name }}</span> 
            &bull; <span class="song">{{ event.track_title }}</span> 
            &bull; <span class="album">{{ event.album_title_display }}</span>
            &bull; <span class="label">{{ event.label_display }}</span>
    
        </p>
        {% if event.notes %}
        <p class="notes"><strong>Notes:</strong> {{ event.notes }}</p>
        {% endif %}
        {% ifequal event.selector.key current_user.key %}
        <p class="playlist-event-management">
            <a title="Delete this entry" href="{% url playlists_delete_event event.key %}">[delete]</a>
        </p>
        {% endifequal %}
        </div>

    {% endif %}

{% endfor %}
{% else %}
<p>No tracks have been played within the last three hours.</p>
{% endif %}


{# <div class="song-info"> <!-- song information container --> #}
{# <p class="time">1:12 PM</p> #}
{# <p><span class="artist">The Jam</span> &bull; <span class="song">New of the World</span> &bull; <span class="album">In The City</span> &bull; <span class="label">Polydor</span></p> #}
{# <p class="notes"><strong>Notes:</strong> Touring sans Paul Weller. Show Tuesday at Beat Kitchen.</p> #}
{# </div> #}
{#  #}
{# <div class="song-info"> <!-- song information container --> #}
{# <p class="time">1:08 PM</p> #}
{# <p><span class="artist">The Clash</span> &bull; <span class="song">Brand New Cadillac</span> &bull; <span class="album">London Calling</span> &bull; <span class="label">Epic</span></p> #}
{# </div> #}
{#  #}
{# <div class="song-info"> <!-- song information container --> #}
{# <p class="time">1:04 PM</p> #}
{# <p><span class="artist">The Beach Boys</span> &bull; <span class="song">I'm Waiting For The Day</span> &bull; <span class="album">Pet Sounds</span> &bull; <span class="label">Capital</span></p> #}
{# <p class="notes"><strong>Notes:</strong> News of Brian Wilson's death were greatly exagerated.</p> #}
{# </div> #}
{#  #}
{# <div class="song-info"> <!-- song information container --> #}
{# <p class="time">12:59 PM</p> #}
{# <p><span class="artist">Nirvana</span> &bull; <span class="song">In Bloom</span> &bull; <span class="album">Nevermind</span> &bull; <span class="label">DGC</span></p> #}
{# </div> #}
{#  #}
{# <p class="break">Break</p> #}
{#  #}
{# <div class="song-info"> <!-- song information container --> #}
{# <p class="time">12:50 PM</p> #}
{# <p><span class="artist">Radiohead</span> &bull; <span class="song">Bodysnatchers</span> &bull; <span class="album">In Rainbows</span> &bull; <span class="label">XL</span></p> #}
{# </div> #}
{#  #}
{# <div class="song-info"> <!-- song information container --> #}
{# <p class="time">12:47 PM</p> #}
{# <p><span class="artist">Portishead</span> &bull; <span class="song">Hunter</span> &bull; <span class="album">Silence</span> &bull; <span class="label">Mercury</span></p> #}
{# </div> #}

<p class="links"><a href="http://chirpradio.org/">CHIRPradio.org</a> &bull; <a href="http://chicagoindieradio.org/">CHIRP Wesbite</a></p>

</div> <!-- end playlist column -->
</div> <!-- end site wrapper -->    
{% endblock %}