{% extends 'base.html' %}

{% block content %}
<script>
    const screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid)}}";
</script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='diff-overview.js')}}" defer></script>

<div id="settings">
    <h1>Current - {{watch.last_checked|format_timestamp_timeago}}</h1>
</div>

<script type="text/javascript" src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
<div class="tabs">
    <ul>
        <li class="tab" id="default-tab"><a href="#text">Text</a></li>
        <li class="tab" id="screenshot-tab"><a href="#screenshot">Screenshot</a></li>
    </ul>
</div>

<div id="diff-ui">
    <div class="tab-pane-inner" id="text">
        <span class="ignored">Grey lines are ignored</span> <span class="triggered">Blue lines are triggers</span>
        <table>
            <tbody>
            <tr>
                <td id="diff-col">
                    {% for row in content %}
                    <div class="{{row.classes}}">{{row.line}}</div>
                    {% endfor %}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
     <div class="tab-pane-inner" id="screenshot">
         <div class="tip">
             For now, Differences are performed on text, not graphically, only the latest screenshot is available.
         </div>
         </br>
         {% if is_html_webdriver %}
           {% if screenshot %}
             <img style="max-width: 80%" id="screenshot-img" alt="Current screenshot from most recent request"/>
           {% else %}
              No screenshot available just yet! Try rechecking the page.
           {% endif %}
         {% else %}
           <strong>Screenshot requires Playwright/WebDriver enabled</strong>
         {% endif %}
     </div>
</div>
{% endblock %}