{% extends "base.html" %}

{% load staticfiles %}

{% block extra_head %}
    <style type="text/css">
        #content {width: 80%;}
        #spinner {position: fixed; top: 50%; left: 50%; margin-top: -64px; margin-left: -64px; z-index: 3;}
        .errorlist {color:red;}
    </style>
    <script type="text/javascript">
        $(function() {
            $('#spinner').hide();
            $('input:submit').button();
            $("table").dataTable({"bPaginate": false, "aaSorting": []});
            $(document).hide().ajaxStart(function() {$('#spinner').show();})
                               .ajaxStop(function() {$('#spinner').hide();});
            $('.data_field').change(function() {
                var identifier = $(this).attr('id');
                var data_value = $(this).val();
                $.post('{% url 'feedreader:update_item' %}',
                    {'identifier' : identifier,
                    'data_value': data_value,
                    'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()},
                    function() {$('#'+identifier+':checkbox').parent().parent().hide();});
            });
        });
    </script>
{% endblock %}

{% block title %}{{ site.domain }}: Feed Reader{% endblock %}

{% block nav_path %}
    <a href="/">{{ site.domain }}</a> &rsaquo;
    <a href="{% url 'feedreader:feed_list' %}">Feedreader</a> &rsaquo;
    Edit
{% endblock %}

{% block content %}
    <div id="spinner">
        <img src="{% static 'spinner.gif' %}" alt="Please wait" title="Please Wait" />
    </div>
    <h1>Feeds</h1>
    <form enctype="multipart/form-data" method="post" action="{% url 'feedreader:edit_feeds' %}">
        {% csrf_token %}
        <p>
            <input type="submit" value="Add Feed" id="add_feed_button"/>
            URL:
            {{ form.feed_url }}
            Group:
            {{ form.feed_group }}
        </p>
        {% if form.feed_url.errors %}
            <p>{{ form.feed_url.errors }}</p>
        {% endif %}
        <p>
            <input type="submit" value="Add Group" id="add_group_button"/>
            {{ form.new_group }}
        </p>
        {% if form.new_group.errors %}
            <p>{{ form.new_group.errors }}</p>
        {% endif %}
        <h2>Feed Import and Export in OPML Format</h2>
        <p>
            <input type="submit" value="Import" id="import"/>
            {{ form.opml_file }}
        </p>
        {% if form.opml_file.errors %}
            <p>{{ form.opml_file.errors }}</p>
        {% endif %}
    </form>
    <form method="get" action="{% url 'feedreader:export_opml' %}">
        <input type="submit" value="Export" id="export"/>
    </form>
    <h2>Current Feeds</h2>
        <table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>URL</th>
                    <th>Group</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {% for group in groups %}
                    {% for feed in group.feed_set.all %}
                        <tr>
                            <td>{{ feed.title }}</td>
                            <td>{{ feed.xml_url }}</td>
                            <td>
                                <select id="feedreader-Feed-group-{{ feed.id }}" class="data_field">
                                    <option value="">---------</option>
                                    {% for feed_group in groups %}
                                        <option {% if feed_group = group %}selected="selected"{% endif %}
                                                value="{{ feed_group.id }}">{{ feed_group }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                            <td>
                                <input id="feedreader-Feed-delete-{{ feed.id }}"
                                    type="checkbox"
                                class="data_field">
                            </td>
                        </tr>
                    {% endfor %}
                {% endfor %}
                {% for feed in no_group %}
                    <tr>
                        <td>{{ feed.title }}</td>
                        <td>{{ feed.xml_url }}</td>
                        <td>
                            <select id="feedreader-Feed-group-{{ feed.id }}" class="data_field">
                                <option selected="selected" value="">---------</option>
                                {% for group in groups %}
                                    <option value="{{ group.id }}">{{ group }}</option>
                                {% endfor %}
                            </select>
                        </td>
                        <td>
                            <input id="feedreader-Feed-delete-{{ feed.id }}"
                                type="checkbox"
                                class="data_field">
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    <h2>Current Groups</h2>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {% for group in groups %}
                    <tr>
                        <td>{{ group }}</td>
                        <td>
                            <input id="feedreader-Group-delete-{{ group.id }}"
                                type="checkbox"
                            class="data_field">
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
{% endblock %}

{% block footer %}
    <p>
    	<a href="#" title="Back to Top">Top</a>;
        <a href="{% url 'admin:feedreader_feed_changelist' %}" title="Edit Feeds">Admin</a>;
        <a href="{% url 'logout' %}">Logout</a>.
    </p>
{% endblock %}