{% extends "base.html" %} {% block styles %}
<style>
/* for each keyword, create a different background color */
{% for keyword in keywords %}
.keyword-{{ keywords[keyword].name }} {
  background-color: {{ keywords[keyword].color }};
}
{% endfor %}
/* for each region, create a different background color */
{% for region in regions %}
.region-{{ region }} {
  background-color: {{ regions[region].color }};
}{% endfor %}
</style>
{% endblock %}
{% block title %}Job Listings{% endblock %}
{% block content %}
<div id="filters">
  <form id="filter-form" method="GET" action="/">
    <label for="region">Region:</label>
    <select name="region" id="region">
      <option value="">All</option>
      {% for region in regions %}
      <option value="{{ region }}" {% if region == selected_region %}selected{% endif %}>{{ region }}</option>
      {% endfor %}
    </select>
    <label for="keyword">Keyword:</label>
    <select name="keyword" id="keyword">
      <option value="">All</option>
      {% for keyword in keywords %}
      <option value="{{ keyword }}" {% if keyword == selected_keyword %}selected{% endif %}>{{ keyword }}</option>
      {% endfor %}
    </select>
    <button type="submit">Filter</button>
    <button type="button" id="reset-filters">Reset</button>
  </form>
  <form id="scrape-form" method="GET" action="/scrape">
    <button type="submit">Scrape Jobs</button>
    <span id="scrape-info"></span>
  </form>
</div>
<div id="jobs">
    {% for job in jobs %}
    <div class="job">
      <h3><a href="{{ job['url'] }}" target="_blank">{{ job['title'] }}</a></h3>
      <p class="job-posted-time">{{ job['posted_time'] }}</p>
      <span class="job-region region-{{ job['region'] }}">{{ job['region'] }}</span>
      <span class="job-keyword keyword-{{ job['keyword']|replace(' ', '')|lower }}">{{ job['keyword'] }}</span>
    </div>
    {% endfor %}
</div>
{% endblock %}
{% block footer_scripts %}
<script src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock %}