<!DOCTYPE html>
<html lang="{{ get_locale()|replace('_', '-') }}" data-darkmode="{{ get_darkmode_state() }}">

  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <meta name="description" content="Self hosted website change detection." >
    <meta name="robots" content="noindex">
    <title>Change Detection{{extra_title}}</title>
    {% if app_rss_token %}
        <link rel="alternate" type="application/rss+xml" title="Changedetection.io » Feed{% if active_tag_uuid %}- {{active_tag.title}}{% endif %}" href="{{ url_for('rss.feed', tag=active_tag_uuid, token=app_rss_token, _external=True )}}" >

        {% if rss_uuid_feed %}
        <link rel="alternate" type="application/rss+xml" title="Feed » {{ rss_uuid_feed['label'] }}" href="{{ rss_uuid_feed['url'] }}" >

        {%- endif -%}
    {%- endif -%}
    <link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='pure-min.css')}}" >
    <link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='flag-icons.min.css')}}" >
    <link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='styles.css')}}?v={{ get_css_version() }}" >
    {% if extra_stylesheets %}
      {% for m in extra_stylesheets %}
        <link rel="stylesheet" href="{{ m }}?ver={{ get_css_version() }}" >
      {% endfor %}
    {% endif %}

    <link rel="apple-touch-icon" sizes="180x180" href="{{url_for('static_content', group='favicons', filename='apple-touch-icon.png')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{url_for('static_content', group='favicons', filename='favicon-32x32.png')}}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{url_for('static_content', group='favicons', filename='favicon-16x16.png')}}">
    <link rel="manifest" href="{{url_for('static_content', group='favicons', filename='site.webmanifest')}}" crossorigin="use-credentials">
    <link rel="mask-icon" href="{{url_for('static_content', group='favicons', filename='safari-pinned-tab.svg')}}" color="#5bbad5">
    <link rel="shortcut icon" href="{{url_for('static_content', group='favicons', filename='favicon.ico')}}">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <script>
        const csrftoken="{{ csrf_token() }}";
        const socketio_url="{{ get_socketio_path() }}/socket.io";
        const is_authenticated = {% if current_user.is_authenticated or not has_password %}true{% else %}false{% endif %};
        // Translatable strings for modal.js (ModalDialog). Defined here in a Jinja
        // template so Babel extract_messages picks them up; modal.js reads this
        // object with English fallbacks. %(name)s is substituted client-side.
        window.ModalDialogI18n = {
            confirmTitle:   {{ _('Confirm Action')|tojson }},
            confirmMessage: {{ _('Are you sure?')|tojson }},
            proceedMessage: {{ _('<p>Are you sure you want to proceed?</p>')|tojson }},
            confirm:        {{ _('Confirm')|tojson }},
            cancel:         {{ _('Cancel')|tojson }},
            delete:         {{ _('Delete')|tojson }},
            unlink:         {{ _('Unlink')|tojson }},
            deleteTitle:    {{ _('Delete %(name)s?')|tojson }},
            deleteMessage:  {{ _('<p>Are you sure you want to delete <strong>%(name)s</strong>?</p><p>This action cannot be undone.</p>')|tojson }},
            unlinkTitle:    {{ _('Unlink %(name)s?')|tojson }},
            unlinkMessage:  {{ _('<p>Are you sure you want to unlink all watches from <strong>%(name)s</strong>?</p><p>The tag will be kept but watches will be removed from it.</p>')|tojson }}
        };
        // Translatable strings for the plain .js files (alerts, prompts, dynamic
        // labels). Defined here so Babel extract_messages picks them up; the JS
        // reads them via i18nT() with an English fallback. %(...)s is substituted
        // client-side.
        window.i18n = {
            serverCommError:  {{ _('There was an error communicating with the server.')|tojson }},
            reloadProblem:    {{ _('There was a problem processing the request, please reload the page.')|tojson }},
            requestProblem:   {{ _('There was a problem processing the request: %(error)s')|tojson }},
            vsFiltersCleared: {{ _("Existing filters under the 'Filters & Triggers' tab were cleared.")|tojson }},
            vsFetching:       {{ _('Fetching element data..')|tojson }},
            vsRendering:      {{ _('Rendering..')|tojson }},
            vsDrawMode:       {{ _('Draw mode - click and drag to select an area')|tojson }},
            vsHover:          {{ _('Hover over elements to select')|tojson }},
            imgCopied:        {{ _('Image copied to clipboard!')|tojson }},
            imgCopyFailed:    {{ _('Failed to copy image. Your browser may not support this feature.')|tojson }},
            imgSelectFirst:   {{ _('Please select the text/lines you want to capture first by highlighting with your mouse.')|tojson }},
            imgSelectWithin:  {{ _('Please select text within the diff content.')|tojson }},
            imgGenerateFailed:{{ _('Failed to generate image: %(error)s')|tojson }},
            shareTitle:       {{ _('Change Detection Diff')|tojson }},
            shareText:        {{ _('Check out this change detected via changedetection.io')|tojson }},
            condFillFields:   {{ _('Please fill in all fields (Field, Operator, and Value) before verifying.')|tojson }},
            condVerifyError:  {{ _('Error verifying condition.')|tojson }},
            destEmailPrompt:  {{ _('Destination email')|tojson }},
            highlightTrigger: {{ _('Triggers a change if this text appears, AND something changed in the document.')|tojson }},
            highlightIgnored: {{ _('Ignored for calculating changes, but still shown.')|tojson }},
            highlightBlocked: {{ _('No change-detection will occur because this text exists.')|tojson }},
            tabContentAfter:  {{ _('Content after filters')|tojson }},
            tabContentBefore: {{ _('Content raw/before filters')|tojson }}
        };
        window.i18nT = function (key, fallback) {
            return (window.i18n && key in window.i18n) ? window.i18n[key] : fallback;
        };
    </script>
    <script src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
    <script src="{{url_for('static_content', group='js', filename='csrf.js')}}" defer></script>
    <script src="{{url_for('static_content', group='js', filename='feather-icons.min.js')}}" defer></script>
    {# Render all <i data-feather="..."> icons app-wide (jQuery ready), so individual pages don't each need their own feather.replace() call. #}
    <script>$(function () { if (window.feather) feather.replace(); });</script>
    {% if socket_io_enabled %}
    <script src="{{url_for('static_content', group='js', filename='socket.io.min.js')}}"></script>
    <script src="{{url_for('static_content', group='js', filename='realtime.js')}}" defer></script>
    <script src="{{url_for('static_content', group='js', filename='queue-sparkline.js')}}" defer></script>
    {% endif %}
    {%- set _html_head_extras = get_html_head_extras() -%}
    {%- if _html_head_extras %}
    {{ _html_head_extras | safe }}
    {%- endif %}
  </head>

  <body class="{{ get_sidebar_mode_class() }} {{ get_blueprint_class() }} {{extra_classes}}">
    <div class="app">
      {% if current_user.is_authenticated or not has_password %}
      <aside class="action-sidebar" aria-label="{{ _('Main navigation') }}">
        <div class="action-sidebar-inner">
          {# sidebar_scope keeps in-SVG ids unique across the desktop + mobile includes #}
          {% with sidebar_scope = 'desktop' %}{% include "sidebar-nav.html" %}{% endwith %}
        </div>
      </aside>
      {% endif %}
      <div class="app-main">
    <div class="header">
    <div>
      <div class="home-menu pure-menu pure-menu-horizontal" id="nav-menu">
          {% if current_diff_url and is_safe_valid_url(current_diff_url) %}
          <a class="current-diff-url" href="{{ current_diff_url }}" title="{{ current_diff_url }}">
            <span>{{ current_diff_url }}</span></a>
        {% endif %}

        <ul class="top-menu-list" id="top-right-menu">
          <!-- Collapsible menu items (hidden on mobile, shown in drawer) -->
          {% include "menu.html" %}

          <li class="" id="heart-us">
                <svg
                   fill="green"
                   class="bi bi-heart"
                   preserveAspectRatio="xMidYMid meet"
                   viewBox="0 0 16.9 16.1"
                   id="svg-heart"
                   xmlns="http://www.w3.org/2000/svg"
                   >
                  <path id="heartpath" d="M 5.338316,0.50302766 C 0.71136983,0.50647126 -3.9576371,7.2707777 8.5004254,15.503028 23.833425,5.3700277 13.220206,-2.5384409 8.6762066,1.6475589 c -0.060791,0.054322 -0.11943,0.1110064 -0.1757812,0.1699219 -0.057,-0.059 -0.1157813,-0.116875 -0.1757812,-0.171875 C 7.4724566,0.86129334 6.4060729,0.50223298 5.338316,0.50302766 Z" style="fill:transparent;fill-opacity:1;stroke:#ff0000;stroke-opacity:1" />
                </svg>
          </li>
          <!-- Hamburger menu button (mobile only) -->
          <li class="">
            <button class="hamburger-menu" id="hamburger-toggle" aria-label="Toggle menu">
              <div class="hamburger-icon">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </button>
          </li>
        </ul>
      </div>

      <!-- Mobile menu drawer -->
      <div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>
      <div class="mobile-menu-drawer" id="mobile-menu-drawer">
        {% if current_user.is_authenticated or not has_password %}
        <nav class="mobile-menu-section mobile-menu-section--primary" aria-label="{{ _('Main navigation') }}">
          {% with sidebar_scope = 'mobile' %}{% include "sidebar-nav.html" %}{% endwith %}
        </nav>
        {% endif %}
        <ul class="mobile-menu-items">
          {% include "menu.html" %}
            <li class=" menu-collapsible">
                {%- if right_sticky -%}<div>{{ right_sticky }}</div>{%- endif -%}
                <a href="https://changedetection.io/?ref={{ guid }}">Let us host your instance!</a><br>
            </li>
        </ul>
      </div>
      </div>

    </div>
    <section class="content">
        <div id="overlay">
            <div class="content">
                <h4>Try our Chrome extension</h4>
                <p>
                    <a id="chrome-extension-link"
                       title="Chrome Extension - Web Page Change Detection with changedetection.io!"
                       href="https://chromewebstore.google.com/detail/changedetectionio-website/kefcfmgmlhmankjmnbijimhofdjekbop">
                        <img alt="Chrome store icon" src="{{url_for('static_content', group='images', filename='google-chrome-icon.png')}}">
                        Chrome Webstore
                    </a>
                </p>
                Easily add the current web-page from your browser directly into your changedetection.io tool, more great features coming soon!
                <h4>Changedetection.io needs your support!</h4>
                <p>
                    You can help us by supporting changedetection.io on these platforms;
                </p>
                <p>
                <ul>
                    <li>
                        <a href="https://alternativeto.net/software/changedetection-io/about/" title="Web page change detection at alternativeto.net">Rate us at
                        AlternativeTo.net</a>
                    </li>
                <li>
                    <a href="https://github.com/dgtlmoon/changedetection.io" title="Web page change detection on GitHub">Star us on GitHub</a>
                </li>
                <li>
                    <a rel="nofollow" href="https://twitter.com/change_det_io" title="Web page change detection on Twitter">Follow us at Twitter/X</a>
                </li>
                <li>
                    <a rel="nofollow" href="https://www.g2.com/products/changedetection-io/reviews" title="Web page change detection reviews at G2">G2 Software reviews</a>
                </li>
                <li>
                    <a rel="nofollow" href="https://www.linkedin.com/company/changedetection-io" title="Visit web page change detection at LinkedIn">Check us out on LinkedIn</a>
                </li>
                <li>
                    And tell your friends and colleagues :)
                </li>
                </ul>
                <p>
                    The more popular changedetection.io is, the more time we can dedicate to adding amazing features!
                </p>
                <p>
                    Many thanks :)<br>
                </p>
                <p>
                    <i>changedetection.io team</i>
                </p>
            </div>
        </div>

        <div class="content-wrapper">
          <div class="content-main">

            {% if header %}
              <header><h3>{{ header }}</h3></header>
            {% endif %}
            {% with messages = get_flashed_messages(with_categories = true) %}
            {% if messages %}
              <ul class="messages">
                {% for category, message in messages %}
                  <li class="{{ category }}">{{ message }}</li>
                {% endfor %}
              </ul>
            {% endif %}
            {% endwith %}
            {% if session['share-link'] %}
              <ul class="messages with-share-link">
                <li class="message">
                  {{ _('Share this link:') }}
                  <span id="share-link">{{ session['share-link'] }}</span>
                  <img style="height: 1em; display: inline-block" src="{{url_for('static_content', group='images', filename='copy.svg')}}" >
                </li>
              </ul>
            {% endif %}
            {% block content %}{% endblock %}
          </div>
        </div>
    </section>
      </div><!-- /.app-main -->
    </div><!-- /.app -->
    <script src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}" defer></script>
    <script src="{{url_for('static_content', group='js', filename='hamburger-menu.js')}}" defer></script>
    <script src="{{url_for('static_content', group='js', filename='sidebar.js')}}" defer></script>
    <script src="{{url_for('static_content', group='js', filename='menu-pop.js')}}" defer></script>

    <div id="checking-now-fixed-tab" style="display: none;"><span class="spinner"></span><span class="status-text">&nbsp;{{ _('Checking now') }}</span></div>
    <div id="realtime-conn-error" style="display:none">{{ _('Real-time updates offline') }}</div>
    {% if bottom_horizontal_offscreen_contents %}
        <div id="bottom-horizontal-offscreen" style="display:none">
            {{ bottom_horizontal_offscreen_contents|safe }}
        </div>
    {% endif %}

    <!-- Language Selection Modal -->
    <dialog id="language-modal" class="modal-dialog" aria-labelledby="language-modal-title">
      <div class="modal-header">
        <h2 class="modal-title" id="language-modal-title">{{ _('Select Language') }}</h2>
      </div>
      <div class="modal-body">
        <div class="language-list">
          {% for locale, lang_data in available_languages.items()|sort %}
          <a href="{{ url_for('set_language', locale=locale, redirect=request.path) }}" class="language-option" data-locale="{{ locale }}">
            <span class="lang-option {{ lang_data.flag }}"></span> <span class="language-name">{{ lang_data.name }}</span>
          </a>
          {% endfor %}
        </div>
        <div>
            <a href="{{ url_for('ui.delete_locale_language_session_var_if_it_exists', redirect=request.path) }}" >{{ _('Auto-detect from browser') }}</a>
        </div>
        <div>
            {{ _('Language support is in beta, please help us improve by opening a PR on GitHub with any updates.') }}
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="pure-button" id="close-language-modal">{{ _('Cancel') }}</button>
      </div>
    </dialog>

    {% if not llm_features_disabled %}
    <!-- LLM Not Configured Modal -->
    <dialog id="llm-not-configured-modal" class="modal-dialog" aria-labelledby="llm-not-configured-modal-title">
      <div class="modal-header">
        <h2 class="modal-title" id="llm-not-configured-modal-title">{{ _('AI / LLM not configured') }}</h2>
      </div>
      <div class="modal-body">
        <p>{{ _('LLM-powered summaries are not yet enabled. Configure an AI provider in Settings to get started.') }}</p>
        <p><a href="{{ url_for('settings.settings_page') }}#ai" class="pure-button pure-button-primary">{{ _('Go to AI / LLM Settings') }}</a></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="pure-button" id="close-llm-not-configured-modal">{{ _('Close') }}</button>
      </div>
    </dialog>
    {% endif %}

    <!-- Search Modal -->
    {% if current_user.is_authenticated or not has_password %}
    <dialog id="search-modal" class="modal-dialog" aria-labelledby="search-modal-title">
      <div class="modal-header">
        <h2 class="modal-title" id="search-modal-title">{{ _('Search') }}</h2>
      </div>
      <div class="modal-body">
        <form id="search-form" method="GET">
          <div class="pure-control-group">
            <label for="search-modal-input">{% if active_tag_uuid %}{{ _("URL or Title in '%(title)s'", title=active_tag.title) }}{% else %}{{ _('URL or Title') }}{% endif %}</label>
            <input id="search-modal-input" class="m-d" name="q" placeholder="{{ _('Enter search term...') }}" required type="text" value="" autofocus>
            <input name="tags" type="hidden" value="{% if active_tag_uuid %}{{active_tag_uuid}}{% endif %}">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="pure-button button-cancel" id="close-search-modal">{{ _('Cancel') }}</button>
        <button type="submit" form="search-form" class="pure-button pure-button-primary">{{ _('Search') }}</button>
      </div>
    </dialog>
    {% endif %}

  <div id="pure-menu-horizontal-spinner"></div>

  <script>
  (function() {
      /* AUTOMATIC TAB COLUMN-IZER FOR WHEN TABS WRAP */
    // Exit early if no tabs on page
    if (!document.querySelector('.tab')) return;

    const cache = new Map();

    function checkWrapping(ul) {
      const tabs = ul.querySelectorAll('.tab');
      if (tabs.length < 2) return false;

      // Init cache on first run
      if (!cache.has(ul)) {
        ul.style.setProperty('--tab-width', '');
        void ul.offsetHeight;
        let max = 0;
        tabs.forEach(t => max = Math.max(max, t.offsetWidth));
        cache.set(ul, max);
      }

      // Temporarily use flex wrap to check if wrapping occurs
      ul.style.display = 'flex';
      ul.style.flexWrap = 'wrap';
      void ul.offsetHeight;

      const top = tabs[0].offsetTop;
      const wrapped = Array.from(tabs).some((t, i) => i > 0 && t.offsetTop !== top);

      // Reset display to use CSS grid
      ul.style.display = '';
      ul.style.flexWrap = '';

      // Set CSS variable for wrapped mode
      if (wrapped) {
        ul.style.setProperty('--tab-width', `${cache.get(ul) + 10}px`);
      } else {
        ul.style.setProperty('--tab-width', '');
      }

      return wrapped;
    }

    function check() {
      let any = false;
      document.querySelectorAll('ul').forEach(ul => {
        if (ul.querySelector('.tab') && checkWrapping(ul)) any = true;
      });
      document.body.classList.toggle('wrapped-tabs', any);
    }

    check();
    let timer;
    window.addEventListener('resize', () => {
      clearTimeout(timer);
      timer = setTimeout(check, 100);
    });

    // Re-check wrapping when tabs are switched via anchors
    window.addEventListener('hashchange', () => {
      clearTimeout(timer);
      // Use requestAnimationFrame + setTimeout to ensure DOM has settled
      requestAnimationFrame(() => {
        timer = setTimeout(check, 0);
      });
    });
  })();
  </script>


    <script src="{{url_for('static_content', group='js', filename='language-selector.js')}}" defer></script>
    <script src="{{url_for('static_content', group='js', filename='search-modal.js')}}" defer></script>
    <script src="{{url_for('static_content', group='js', filename='toast.js')}}"></script>
    <script src="{{url_for('static_content', group='js', filename='flask-toast-bridge.js')}}" defer></script>
  </body>

</html>
