{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% get_current_language as LANGUAGE_CODE %}

{% block title %} {% trans 'Search Results for your query about a research article' %} {% endblock %}
{% block extra_head_tags %}
  <meta name="description" content="{% trans 'Discover the latest research about a topic of your choice with our comprehensive search results page. Explore relevant articles, studies, and papers to stay up-to-date on all topics of interest. Find the information you need to inform your research and stay ahead of the curve.' %}" />
  <link rel="canonical" href="https://www.summarizepaper.com/{{LANGUAGE_CODE}}/search-results/" />

  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
    <script type="text/javascript" id="MathJax-script" async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
    </script>

  <style>
    .search-results {
      margin: 50px auto;
      max-width: 800px;
    }

    .search-result {
      padding: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
    }

    .search-result:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .search-result-title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }

    .search-result-metadata {
      font-size: 14px;
      color: #777;
    }

    .search-result-arxiv-id {
      margin-bottom: 5px;
    }

    .search-result-authors {
      margin-bottom: 5px;
    }

    .search-result-published {
      margin-bottom: 5px;
    }

    .search-result-category {
      font-style: italic;
    }

    .search-result-title a {
      /*color: #333;*/
      text-decoration: none;
    }

    .search-result-title a:hover {
       text-decoration: underline;
    }

    .search-result-arxiv-id a {
      color: #333;
    }

    .search-result a:hover {
      color: #007bff;
    }
    h1 {
      position: relative;
      font-size: 28px;
      text-align:center;
      font-weight: bold;
      color: #333;
      margin-top: 50px;
      margin-bottom: 30px;
    }
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
      font-size: 18px;
      color: #555;
    }

    .pagination a {
      display: inline-block;
      margin: 0 5px;
      padding: 5px 10px;
      background-color: #f2f2f2;
      border-radius: 5px;
      text-decoration: none;
      color: #555;
    }

    .pagination a:hover {
      background-color: #ddd;
    }

    .pagination .active {
      background-color: #4CAF50;
      color: white;
    }

    /* Responsive styles for pagination */
    @media only screen and (max-width: 600px) {
      .pagination {
        flex-direction: column;
        font-size: 14px;
        margin: 10px 0;
      }

      .pagination a {
        margin: 5px 0;
        padding: 5px;
      }

      .pagination .current-page {
        margin: 5px 0;
      }
    }

    .no-results {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-top: 50px;
      color: #555;
    }

    .no-results a {
      color: #007bff;
      text-decoration: none;
    }

    .no-results a:hover {
      text-decoration: underline;
    }

    a.back-link {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      background-color: #3f51b5;
      text-decoration: none;
      border-radius: 5px;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s ease-in-out;
    }

    a.back-link:hover {
      background-color: #2c3e50;
    }


  </style>
{% endblock %}

{% block header_class %}{% endblock %}

{% block content %}
  {% if query %}
    <h1>{% trans 'Search Results for' %} -- {{ query }} --</h1>
  {% else %}
    <h1>{% trans 'You need to fill in the search field to get a response! Go back and do so...' %}</h1>
  {% endif %}
  <div class="search-results">
    {% if page_obj %}
    <p><a href="/{{ LANGUAGE_CODE }}/" class="back-link">{% trans 'Go back' %}</a></p>
    {% for paper in page_obj %}
    <div class="search-result">
      <div class="search-result-title">
        <a href="/{{ LANGUAGE_CODE }}/arxiv-id/{{ paper.arxiv_id }}">{{ paper.title }}</a>
      </div>
      <div class="search-result-metadata">
        <div class="search-result-arxiv-id">
          <a href="{{ paper.link }}" target="_blank">{{ paper.arxiv_id }}</a>
        </div>
        <div class="search-result-authors">{{ paper.authors|join:", " }}</div>
        <div class="search-result-published">{{ paper.published|date:"jS F Y" }}</div>
        <div class="search-result-category">{% trans 'Category:' %} {{ paper.category }}</div>
      </div>
    </div>
    {% endfor %}


    <div class="pagination">
      <span class="step-links">
        {% if page_obj.has_previous %}
          <a href="?q={{ query }}&page=1">&laquo; {% trans 'first' %}</a>
          <a href="?q={{ query }}&page={{ page_obj.previous_page_number }}">&lsaquo; {% trans 'previous' %}</a>
        {% endif %}

        <span class="current-page">
          {% trans 'Page' %} {{ page_obj.number }} {% trans 'of' %} {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
          <a href="?q={{ query }}&page={{ page_obj.next_page_number }}">{% trans 'next' %} &rsaquo;</a>
          <a href="?q={{ query }}&page={{ page_obj.paginator.num_pages }}">{% trans 'last' %} &raquo;</a>
        {% endif %}
      </span>
    </div>
    <p><a href="/{{ LANGUAGE_CODE }}/" class="back-link">{% trans 'Go back' %}</a></p>

  {% else %}
    <p class="no-results">{% trans 'No results found.' %} (<a href="/{{ LANGUAGE_CODE }}/">{% trans 'Go back' %}</a>)</p>
    <p style="text-align: center;color: red;">{% trans 'Make sure to search with the language used in the arXiv paper, i.e. use mostly English.' %}</p>
    <p style="text-align: center;color: red;">{% trans 'You can also use field codes to search for a specific field: "au:" for authors, "ti:" for titles, "abs:" for abstracts, "co:" for comments, "jr:" for journal reference,"cat:" for category, and "id:" for ID.' %}</p>
  {% endif %}
</div>

{% endblock %}

{% block scripts %}


{% endblock %}