{% extends 'base.html' %}
{% block content %}
{% from '_helpers.jinja' import render_simple_field %}

<script src="{{url_for('static_content', group='js', filename='tbltools.js')}}"></script>

<div class="box">

	<form class="pure-form" action="{{ url_for('api_watch_add') }}" method="POST" id="new-watch-form">
		<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="tag") }}
			<div id="watch-actions"><button type="submit" class="pure-button pure-button-primary" name="action" value="watch">Watch</button>&nbsp;
			<span id="add-paused"><label><input type="checkbox" name="add-paused">&nbsp;Add Paused</label></span></div>
	   </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 id="watch-table-wrapper" tabindex="-1">
		<div id="categories">
			<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="controls-top">
			<div id="checkbox-functions" style="display: none;">
				<ul id="post-list-buttons-top-grid">
					<li id="grid-item-1">
						<a href="javascript:processChecked('recheck_selected', '{{ active_tag }}');" class="pure-button button-tag " title="Recheck Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Recheck&nbsp;</a>
					</li>
					<li id="grid-item-2">
						<a href="javascript:processChecked('mark_selected_notviewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Unviewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Unviewed</a>
					</li>
					<li id="grid-item-3">
						<a href="javascript:processChecked('mark_selected_viewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Viewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Viewed&nbsp;&nbsp;</a>
					</li>
					<li id="grid-item-4">
						<a href="javascript:processChecked('delete_selected', '{{ active_tag }}');" class="pure-button button-tag danger " title="Delete Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Delete&nbsp;&nbsp;</a>
					</li>
					<li id="grid-item-5">
					   <a href="javascript:closeGridDisplay();" class="pure-button button-tag ">Cancel&nbsp;&nbsp;</a>
					</li>
				</ul>
			</div>
		</div>

		<div>
			<table class="pure-table pure-table-striped watch-table" id="watch-table">
				<thead>
				<tr id="header">
					<th class="inline chkbox-header"><input id="chk-all" type="checkbox" name="showhide" onchange="checkAll(this)" title="Check/Uncheck All">&nbsp;&nbsp;#</th>
					<th class="pause-resume-header" onclick="sortTable(1)"><span class="clickable" title="Sort by Pause/Resume"><a href="{{url_for('index', pause='pause-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;<a href="{{url_for('index', pause='resume-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;&nbsp;<span id="sortable-1"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" alt="sort" /></span><span class="sortarrow"><span id="sort-1a" style="display:none;">&#9650;</span><span id="sort-1d" style="display:none;">&#9660;</span></span></span></th>
					<th onclick="sortTable(3)"><span class="clickable" title="Sort by Title">Title&nbsp;&nbsp;<span id="sortable-3"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" alt="sort" /></span><span class="sortarrow"><span id="sort-3a" style="display:none;">&#9650;</span><span id="sort-3d" style="display:none;">&#9660;</span></span></span></th>
					<th class="hidden-col"></th>
					<th onclick="sortTable(5)"><span class="clickable" title="Sort by Last Checked">Checked&nbsp;&nbsp;<span id="sortable-5"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" alt="sort" /></span><span class="sortarrow"><span id="sort-5a" style="display:none;">&#9650;</span><span id="sort-5d" style="display:none;">&#9660;</span></span></span></th>
					<th class="hidden-col"></th>
					<th onclick="sortTable(7)"><span class="clickable" title="Sort by Last Changed">Changed&nbsp;&nbsp;<span id="sortable-7" style="display:none;"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" alt="sort" /></span><span class="sortarrow"><span id="sort-7a" style="display:none;">&#9650;</span><span id="sort-7d">&#9660;</span></span></span></th>
					<th class="hidden-col"></th>
					<th>Actions</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.paused is defined and watch.paused != False %}paused{% endif %}
							{% if watch.newest_history_key| int > watch.last_viewed| int %}unviewed{% endif %}">
							<td class="inline chkbox"><input id="chk-{{ loop.index }}" type="checkbox" name="check" onchange="checkChange(this);">&nbsp;&nbsp;{{ loop.index }}</td>
							<td class="inline pause-resume">
							{% if watch.paused %}
								<a href="{{url_for('index', pause=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume"/></a>
							{% else %}
								<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>
							{% endif %}
							</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 inline-hover-img" target="_blank" rel="noopener" href="{{ watch.url }}"></a>
								{%if watch.fetch_backend == "html_webdriver" %}<img style="height: 1em; display:inline-block;" src="/static/images/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 not active_tag %}
								<span class="watch-tag-list">{{ watch.tag}}</span>
								{% endif %}
							</td>
							<td class="hidden-col">{{ watch.title if watch.title else watch.url }}</td>
							<td class="last-checked">{{watch|format_last_checked_time}}</td>
							<td class="hidden-col">{{ watch.last_checked }}</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 class="hidden-col">{{ watch.last_changed }}</td>
							<td>
								<a href="{{ url_for('api_watch_checknow', uuid=watch.uuid, tag=request.args.get('tag')) }}"
								   class="pure-button button-small pure-button-primary">Recheck</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</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 id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" alt="" style="height:15px"></a>
				</li>
			</ul>
		</div>
	</div>

</div>
{% endblock %}