{% extends "base.html" %}
{% block title %}Search Results{% endblock %}
{% block page_title %}Search Results{% endblock %}
{% block content %}

<div class="container content-section" style="background-color: #f8f9fa;">

  <div class="row">
    <div class="col-md-6">
      <form method="GET" action="{{ url_for('search_calls') }}">
        <div class="input-group mb-3">
          <input type="text" class="form-control" name="query" placeholder="Search by company name or symbol"
            aria-label="Search">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit">Search</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="row">
    <div class="col-10">
      <h3>{{ pagination.total }} Results found for "{{ query }}"</h3>
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      <table class="table table-bordered table-hover" style="background-color: #fff;">
        <thead>
          <tr>
            <th>Symbol</th>
            <th>Company Name</th>
            <th>Year</th>
            <th>Quarter</th>
            <th>Call Date</th>
            {% if current_user.is_authenticated and current_user.get_id() == "1" %}
            <th>Actions</th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
          {% if calls %}
          {% for call in calls %}
          <tr class="table-row" data-href="{{ url_for('call_page', call_id=call.id) }}">
            <td>{{ call.symbol }}</td>
            <td class="nowrap">{{ call.companyname }}</td>
            <td>{{ call.year }}</td>
            <td style="text-align: center;">{{ call.quarter }}</td>
            <td class="nowrap">{{ call.date }}</td>
            {% if current_user.is_authenticated and current_user.get_id() == "1" %}
            <td class="actions">
              <a href="{{ url_for('edit_call', call_id=call.id) }}" class="btn btn-link">Edit</a>
              <a href="{{ url_for('delete_call', call_id=call.id) }}" class="btn btn-link">Delete</a>
            </td>
            {% endif %}
          </tr>
          {% endfor %}
          {% else %}
          <p>No results found for "{{ query }}".</p>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="d-flex justify-content-center mt-3"> 
    <nav aria-label="Page navigation">
      <ul class="pagination">
        {% if pagination.has_prev %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for('search_calls', query=query, page=pagination.prev_num) }}" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        {% else %}
        <li class="page-item disabled">
          <span class="page-link">&laquo;</span>
        </li>
        {% endif %}

        {% for page_num in pagination.iter_pages() %}
        {% if page_num %}
        {% if page_num == pagination.page %}
        <li class="page-item active">
          <span class="page-link">{{ page_num }}</span>
        </li>
        {% else %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for('search_calls', query=query, page=page_num) }}">{{ page_num }}</a>
        </li>
        {% endif %}
        {% else %}
        <li class="page-item disabled">
          <span class="page-link">...</span>
        </li>
        {% endif %}
        {% endfor %}

        {% if pagination.has_next %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for('search_calls', query=query, page=pagination.next_num) }}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
        </li>
        {% else %}
        <li class="page-item disabled">
          <span class="page-link">&raquo;</span>
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const rows = document.querySelectorAll('.table-row');
    rows.forEach(row => {
      row.addEventListener('click', () => {
        window.location.href = row.getAttribute('data-href');
      });
    });
  });
</script>

{% endblock %}