<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/css/main.css" />
	<link rel="stylesheet" href="/jquery-ui/themes/base/all.css" />
<script src="/jquery/dist/jquery.min.js"></script>
<script src="/jquery-ui/dist/jquery-ui.min.js"></script>
    <title>Home</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <% if (userLoggedIn) { %>
          <li><a href="/profile/<%= musician.id %>">Hello, <%= username %></a></li>
          <li><a href="/logout">Logout</a></li>
          <% } else { %>
          <li><a href="/register">Register</a></li>
          <li><a href="/login">Login</a></li>
          <% } %>
        </ul>
		
		
      </nav>
    </header>
    <main>
      <!-- добавляет форму с поиском музыкантом -->
	  <form action="/search" method="get">
		<label for="query">Search by name or genre:</label> <input id="query" name="query" type="text" value="<%= query %>"><br>
		<br>
		<label for="role">Search by role:</label> <select id="role" name="role">
			<option value="">
				All
			</option>
			<option value="Band">
				Band
			</option>
			<option value="Artist">
				Artist
			</option>
		</select>
		
<label for="city">Search by location:</label>
<input id="city" name="city" type="text" autocomplete="on" value="<%= city %>" data-value="">

		<br>
		<!-- Add new input field for location -->


		<br>
		
		<br>
		<button type="submit">Search</button>
	</form><%if (musicians.length > 0) { %>
	<h2>Results:</h2>
	<ul>
		<%musicians.forEach(musician => { %>
		<li>
			<a href="<%= musician.profileLink %>"><%= musician.name %> <%if (musician.thumbnail) { %> <img src="/img/<%= musician.thumbnail %>" alt="<%= musician.name %>"> <%} %></a> - <%= musician.genre %> - <%= musician.location %> <%if (musician.soundcloud) { %> <a href="%3C%=%20musician.soundcloud%20%%3E">SoundCloud</a> <%} %>
		</li><%}); %>
	</ul><%} else if (query || role) { %>
	<p>No musicians found.</p><%} %>
	<!--  -->
  <h2>New Musicians</h2>
  <ul>
    <% musicians.forEach(musician => { %>
    <li>
      <a href="/profile/<%= musician.id %>"><%= musician.name %></a> - <%= musician.thumbnail %>
      <%= musician.genre %>, <%= musician.instrument %>
    </li>
    <% }); %>
  </ul>
</div>
    </main>
	<script>
	$("#city").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("#city");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;
	</script>
  </body>
</html>

ReferenceError: C:\Users\Ilya\Downloads\my-musician-network\views\index.ejs:33
    31|       <!-- добавляет форму с поиском музыкантом -->

    32| 	  <form action="/search" method="get">

 >> 33| 		<label for="query">Search by name or genre:</label> <input id="query" name="query" type="text" value="<%= query %>"><br>

    34| 		<br>

    35| 		<label for="role">Search by role:</label> <select id="role" name="role">

    36| 			<option value="">


query is not defined