{% extends 'base.html' %}
{% block content %}
{% from '_helpers.jinja' import render_simple_field %}
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='watch-overview.js')}}" defer></script>
<div class="box">

    <form class="pure-form" action="{{ url_for('api_watch_add') }}" method="POST" id="new-watch-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <fieldset>
            <legend>Add a new change detection watch</legend>
                {{ render_simple_field(form.url, placeholder="https://...", required=true) }}
                {{ render_simple_field(form.tag, value=active_tag if active_tag else '', placeholder="watch group") }}
            <button type="submit" class="pure-button pure-button-primary">Watch</button>
        </fieldset>
        <!-- add extra stuff, like do a http POST and send headers -->
        <!-- user/pass r = requests.get('https://api.github.com/user', auth=('user', 'pass')) -->
    </form>
    <div>
        <a href="{{url_for('index')}}" class="pure-button button-tag {{'active' if not active_tag }}">All</a>
        {% for tag in tags %}
            {% if tag != "" %}
                <a href="{{url_for('index', tag=tag) }}" class="pure-button button-tag {{'active' if active_tag == tag }}">{{ tag }}</a>
            {% endif %}
        {% endfor %}
    </div>

    <div id="watch-table-wrapper">
        <table class="pure-table pure-table-striped watch-table">
            <thead>
            <tr>
                <th>#</th>
                <th></th>
                <th></th>
                <th>Last Checked</th>
                <th>Last Changed</th>
                <th></th>
            </tr>
            </thead>
            <tbody>


            {% for watch in watches %}
            <tr id="{{ watch.uuid }}"
                class="{{ loop.cycle('pure-table-odd', 'pure-table-even') }}
                {% if watch.last_error is defined and watch.last_error != False %}error{% endif %}
                {% if watch.last_notification_error is defined and watch.last_notification_error != False %}error{% endif %}
                {% if watch.paused is defined and watch.paused != False %}paused{% endif %}
                {% if watch.newest_history_key| int > watch.last_viewed| int %}unviewed{% endif %}
                {% if watch.uuid in queued_uuids %}queued{% endif %}">
                <td class="inline">{{ loop.index }}</td>
                <td class="inline paused-state state-{{watch.paused}}"><a href="{{url_for('index', pause=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause"/></a></td>

                <td class="title-col inline">{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
                    <a class="external" target="_blank" rel="noopener" href="{{ watch.url.replace('source:','') }}"></a>
                    {%if watch.fetch_backend == "html_webdriver" %}<img style="height: 1em; display:inline-block;" src="{{url_for('static_content', group='images', filename='Google-Chrome-icon.png')}}" />{% endif %}

                    {% if watch.last_error is defined and watch.last_error != False %}
                    <div class="fetch-error">{{ watch.last_error }}</div>
                    {% endif %}
                    {% if watch.last_notification_error is defined and watch.last_notification_error != False %}
                    <div class="fetch-error notification-error">{{ watch.last_notification_error }}</div>
                    {% endif %}
                    {% if not active_tag %}
                    <span class="watch-tag-list">{{ watch.tag}}</span>
                    {% endif %}
                </td>
                <td class="last-checked">{{watch|format_last_checked_time}}</td>
                <td class="last-changed">{% if watch.history|length >= 2 and watch.last_changed %}
                    {{watch.last_changed|format_timestamp_timeago}}
                    {% else %}
                    Not yet
                    {% endif %}
                </td>
                <td>
                    <a {% if watch.uuid in queued_uuids %}disabled="true"{% endif %} href="{{ url_for('api_watch_checknow', uuid=watch.uuid, tag=request.args.get('tag')) }}"
                       class="recheck pure-button button-small pure-button-primary">{% if watch.uuid in queued_uuids %}Queued{% else %}Recheck{% endif %}</a>
                    <a href="{{ url_for('edit_page', uuid=watch.uuid)}}" class="pure-button button-small pure-button-primary">Edit</a>
                    {% if watch.history|length >= 2 %}
                    <a href="{{ url_for('diff_history_page', uuid=watch.uuid) }}" target="{{watch.uuid}}" class="pure-button button-small pure-button-primary diff-link">Diff</a>
                    {% else %}
                        {% if watch.history|length == 1 %}
                            <a href="{{ url_for('preview_page', uuid=watch.uuid)}}" target="{{watch.uuid}}" class="pure-button button-small pure-button-primary">Preview</a>
                        {% endif %}
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <ul id="post-list-buttons">
            {% if has_unviewed %}
            <li>
                <a href="{{url_for('mark_all_viewed', tag=request.args.get('tag')) }}" class="pure-button button-tag ">Mark all viewed</a>
            </li>
            {% endif %}
            <li>
               <a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
                all {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
            </li>
            <li>
                <a href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}"><img alt="RSS Feed" id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15"></a>
            </li>
        </ul>
    </div>
</div>
{% endblock %}