{% extends "layout.html" %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('.static', filename='css/movies.css') }}" type="text/css" media="screen"/>

<script type="text/javascript">
    function show_add_area(){
        $("#add_button").hide();
        $("#add_area").show("slide", {direction: "up"}, 500);
    }

    $(document).ready(function() {
        $("div.movie").hover(
            function () {
                $(this).find("div.delete").show();
                /*
                $(this).find("div.qualities").show();
                */
            },
            function () {
                $(this).find("div.delete").hide();
                /*
                $(this).find("div.qualities").hide();
                */
            });
    });

</script>


{% endblock %}

{% block main %}
    <div style="float: left;">
        <h1>Queued Movies</h1>
    </div>

    <div style="float: right;" id="add_button">
        <button type="button" class="add" onclick="show_add_area()">
            Add
        </button>
    </div>

    <div id="add_area" class="add">
        <form method="post" action="{{ url_for('.add_to_queue') }}">
            <strong>Add Movie:</strong>
            <input type="text" name="what">
            Quality:
            <select name="quality">
                <option value="ANY">ANY</option>
                <option value="dvdrip">DVDrip</option>
                <option value="720p bluray">720p BluRay</option>
                <option value="1080p bluray">1080p BluRay</option>
            </select>
            Force:
            <input type="checkbox" name="force" checked="">
            <input type="submit" value="Add">
        </form>
    </div>
    <div style="clear: both;"></div>

    <!-- movie list -->
    <div class="queue">
        {% for movie in movies %}
        <div class="movie drop-shadow curved curved-vt-2">
            <div class="delete">
                <a href="{{ url_for(".del_from_queue", imdb_id=movie.imdb_id) }}">
                    <img border="0" src="{{ url_for('static', filename='img/fatcow-icons/16x16/delete.png') }}" alt="Delete"/>
                </a>
            </div>
            <div class="thumb">
                {#
                {% if movie.thumb %}
                    <img src="{{ movie.thumb }}" />
                {% else %}
                    <div class="nothumb">?</div>
                {% endif %}
                #}
                <div style="height: 133px; width: 92px; background: #ccc;">
                    {% if movie.thumb %}
                        {# use straight from the cache #}
                        <img src="{{ movie.thumb }}" />
                    {% else %}
                        {# try to retrieve (slow) #}
                        <img src="cover/{{ movie.imdb_id }}" />
                    {% endif %}
                </div>
            </div>

            <div class="movie_text">
                <div class="movie_title">
                    <h3><a href="http://www.imdb.com/title/{{ movie.imdb_id }}/">
                        {{ movie.title }}</a> ({{ movie.year }})
                    </h3>
                    {#
                    <a href="{{ url_for(".del_from_queue", imdb_id=movie.imdb_id) }}">
                        <img border="0" src="{{ url_for('static', filename='img/fatcow-icons/16x16/delete.png') }}" alt="Delete"/>
                    </a>
                    #}
                </div>

                <p>{{ movie.overview }}</p>
            </div>

            <div style="clear: both;"></div>

            <div class="qualities">
                <ul class="quality">
                    {% for qual in ['1080p bluray', '720p bluray', 'dvdrip', 'ANY'] %}
                        {% if movie.quality == qual %}
                            <li class="active">{{ qual }}</li>
                        {% else %}
                            <li><a href="{{ url_for('.edit_movie_quality', imdb_id=movie.imdb_id, quality=qual) }}">{{ qual }}</a></li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>

        </div>
        {% endfor %}
    </div>
{% endblock %}
