core/templates/home.html

<!-- templates/home.html -->
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}

<h2>Welcome, {{ user.first_name }}!
  {% if author %}
  <a href="{% url 'author_detail' author.id %}" class="btn btn-primary">🧑‍🔬 View Your Research Profile</a>
  {% else %}
</h2>
{# <p>No matching author found for your profile.</p> #}
{% endif %}
<hr>
<h2>Search Domains</h2>
<input type="text" id="search-input" placeholder="Type something..." autocomplete="off" />
<ul id="results-list"></ul>

<h2>Search Authors</h2>
<input type="text" id="author-search-input" placeholder="Type an author's name..." autocomplete="off" />
<ul id="author-results-list"></ul>
{% endblock %}

{% block js %}
<script>
  const debounce = (func, delay) => {
    let timeout
    return (...args) => {
      clearTimeout(timeout)
      timeout = setTimeout(() => func(...args), delay)
    }
  }

  const input = document.getElementById('search-input')
  const resultsList = document.getElementById('results-list')

  const handleSearch = async () => {
    const query = input.value.trim()
    if (!query) {
      resultsList.innerHTML = ''
      return
    }

    const res = await fetch(`/api/search/?q=${encodeURIComponent(query)}`)
    const data = await res.json()

    resultsList.innerHTML = ''
    data.results.forEach((item) => {
      const li = document.createElement('li')

      const link = document.createElement('a')
      link.href = `/${item.type.toLowerCase()}/${item.id}/`
      link.textContent = item.text
      link.style.textDecoration = 'none'
      link.style.color = 'black'
      li.appendChild(link)
      resultsList.appendChild(li)
    })
  }

  input.addEventListener('input', debounce(handleSearch, 1000))

  const authorInput = document.getElementById('author-search-input')
  const authorResultsList = document.getElementById('author-results-list')

  const handleAuthorSearch = async () => {
    const query = authorInput.value.trim()
    if (!query) {
      authorResultsList.innerHTML = ''
      return
    }

    const res = await fetch(`/search_author/?q=${encodeURIComponent(query)}`)
    const data = await res.json()

    authorResultsList.innerHTML = ''
    data.results.forEach((item) => {
      const li = document.createElement('li')

      const link = document.createElement('a')
      link.href = `/author/${item.id}/`
      link.textContent = item.text
      link.style.textDecoration = 'none'
      link.style.color = 'black'
      li.appendChild(link)
      authorResultsList.appendChild(li)
    })
  }

  authorInput.addEventListener('input', debounce(handleAuthorSearch, 1000))
</script>
{% endblock %}