{% extends "base.html" %}
{% block title %}Rule Entries: {{ rule.name }}{% endblock %}

{% block content %}
  <main>
    <section class="item-container">
      <div class="item-title-bar">
        <h3>{{ rule.name }} - Entries</h3>
      </div>

      <div class="item-body">
        <div class="item-info">
          <p><strong>Description:</strong> {{ rule.description }}</p>
          <p><strong>Criteria:</strong> {{ rule.instruction }}</p>
          {% if rule.data_source == 'RSS' %}
            <p><strong>Feed Name:</strong> {{ rule.feed_name }}</p>
            <p><strong>Feed URL:</strong> {{ rule.url }}</p>
          {% elif rule.data_source == 'webpage' %}
            <p><strong>Webpage URL:</strong> {{ rule.url }}</p>
            <p><strong>XPath:</strong> {{ rule.xpath }}</p>
          {% endif %}
          <p><strong>Interval:</strong>
            {% set total_seconds = rule.polling_interval %}
            {% set days = total_seconds // 86400 %}
            {% set hours = (total_seconds % 86400) // 3600 %}
            {% set minutes = (total_seconds % 3600) // 60 %}
            {% set seconds = total_seconds % 60 %}
            {% if days %}{{ days }} day{% if days != 1 %}s{% endif %}{% endif %}
            {% if hours %} {{ hours }} hour{% if hours != 1 %}s{% endif %}{% endif %}
            {% if minutes %} {{ minutes }} minute{% if minutes != 1 %}s{% endif %}{% endif %}
            {% if seconds or total_seconds == 0 %} {{ seconds }} second{% if seconds != 1 %}s{% endif %}{% endif %}
          </p>
        </div>
      </div>
      
      <div style="display:flex; gap:1em; margin:1em;">
        <a href="{{ url_for('dashboard') }}" class="back-btn">Back to Dashboard</a>
      </div>
    </section>

    <div id="entries">
      {% if entries %}
        {% for entry in entries %}
          <section class="item-container">
            <div class="item-title-bar">
              <h3>{{ entry.title }}</h3>
            </div>
            <div class="item-body">
              <div class="item-info">
                <p><strong>Link:</strong> <a href="{{ entry.link }}" target="_blank">{{ entry.link }}</a></p>
                <p><strong>Published:</strong> {{ entry.pub_date }}</p>
              </div>
            </div>
          </section>
        {% endfor %}
      {% else %}
        <section class="item-container">
          <div class="item-body">
            <div class="item-info">
              <p>No entries found for this rule.</p>
            </div>
          </div>
        </section>
      {% endif %}
    </div>
  </main>

  <style>
    .back-btn {
      background-color: var(--secondary-color);
      color: var(--main-color);
      padding: 0.5em 1em;
      border-style: none;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      transition: background 0.3s ease;
      cursor: pointer;
      display: inline-block;
    }
    .back-btn:hover {
      background-color: var(--main-color);
      color: var(--secondary-color);
    }
  </style>

  <script>
    function formatDate(iso) {
      return new Date(iso).toLocaleString();
    }
    
    document.addEventListener('DOMContentLoaded', function() {
      const dates = document.querySelectorAll('#entries .item-info p:nth-child(2)');
      dates.forEach(dateElement => {
        const dateText = dateElement.textContent;
        const dateValue = dateText.replace('Published:', '').trim();
        if (dateValue) {
          try {
            const formattedDate = formatDate(dateValue);
            dateElement.innerHTML = `<strong>Published:</strong> ${formattedDate}`;
          } catch (e) {
            console.error('Error formatting date:', e);
          }
        }
      });
    });
  </script>  
{% endblock %}