gistfile1.txt

{% assign contentType = get_content_type_by_developer_name('posts') %}
{% assign categoriesField = contentType.ContentTypeFields | where: "DeveloperName", "category" | first %}
{% macro filter_is_selected(filterParam, developer_name, val) %}
  {% assign compare_to = developer_name | append: " eq '" | append: val | append: "'" %}
  {% if filterParam contains compare_to %}
  selected
  {% endif %}
{% endmacro %}

{% macro label_for_choice(choices, val) %}
  {% assign choice = choices | where: "DeveloperName", val | first %}
  {{ choice.Label }}
{% endmacro %}

<div class="row">
  <!-- Job Listings -->
  <div class="col-md-9">
    <h1 class="mb-4">{{ Target.Label }}</h1>
    <ul class="list-group">
      {% for item in Target.Items %}
      <li class="list-group-item">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1"><a href="{{ PathBase }}/{{item.RoutePath}}">{{ item.PrimaryField }}</a></h5>
          <small>{{ item.CreationTime | date: "%b %d, %Y" }}</small>
        </div>
        <p class="mb-1">{{ item.PublishedContent.company.Value }}, {{ label_for_choice(categoriesField.Choices, item.PublishedContent.category.Value) }}</p>
        <small>{{ item.PublishedContent.location.Value }}</small>
        {% if item.PublishedContent.salary_range.Value and item.PublishedContent.salary_range.Value != '' %}
        <p class="mt-1">{{ item.PublishedContent.salary_range.Value }}</p>
        {% else %}
        <p class="mt-1">No salary information provided</p>
        {% endif %}
        {% if item.PublishedContent.is_remote_only.Value %}
        <p class="mt-1">Remote Only</p>
        {% endif %}
      </li>
      {% endfor %}
      <!-- More Job Listings -->
    </ul>

    <nav aria-label="page navigation" class="py-4">
      {% if Target.TotalCount == 1 %}
      <p>{{ Target.TotalCount }} result</p>
      {% else %}
      <p>{{ Target.TotalCount }} results</p>
      {% endif %}
      <ul class="pagination">
        <li class="page-item {% if Target.PreviousDisabledCss %}disabled{% endif %}">
          <a href="/{{ Target.RoutePath }}?pageNumber={{ Target.PageNumber | minus: 1 }}" class="page-link">
            «
          </a>
        </li>
        {% if Target.FirstVisiblePageNumber > 1 %}
        <li class="page-item disabled">
          <a class="page-link">...</a>
        </li>
        {% endif %}
        {% for i in (Target.FirstVisiblePageNumber..Target.LastVisiblePageNumber) %}
        <li class="page-item {% if Target.PageNumber == i %}active{% endif %}">
          <a href="/{{ Target.RoutePath }}?pageNumber={{ i }}" class="page-link">{{ i }}</a>
        </li>
        {% endfor %}

        {% if Target.LastVisiblePageNumber < Target.TotalPages %} <li class="page-item disabled">
          <a class="page-link">...</a>
          </li>
          {% endif %}
          <li class="page-item {% if Target.NextDisabledCss %}disabled{% endif %}">
            <a href="/{{ Target.RoutePath }}?pageNumber={{ Target.PageNumber | plus: 1 }}" class="page-link">
              »
            </a>
          </li>
      </ul>
    </nav>

  </div>

  <!-- Sidebar -->
  <div class="col-md-3">
    <h4>Filter Jobs</h4>
    <hr>
    <form method="get" action="/" id="filter-form">
      <div class="mb-3">
        <label for="keyword" class="form-label">Search</label>
        <input type="text" class="form-control" id="keyword" name="search" value="{{ Target.Search }}">
      </div>
      <div class="mb-3">
        <label for="location" class="form-label">Location</label>
        {% assign locationValue = Target.Filter | split: "contains(location, '" %}
        {% if locationValue.size > 0 and Target.Filter contains 'contains(location' %}     
          <input type="text" class="form-control" id="location-search" value="{{ locationValue | first | split: "'" | first }}">
        {% else %}
          <input type="text" class="form-control" id="location-search" value="">
        {% endif %}
      </div>
      <div class="mb-3">
        <label for="category" class="form-label">Category</label>
        <select class="form-select" id="category-select">
            <option {{ filter_is_selected(Target.Filter, 'category', '') }} value="">All Categories</option>
            {% for choice in categoriesField.Choices %}
              <option {{ filter_is_selected(Target.Filter, 'category', choice.DeveloperName) }} value="category eq '{{ choice.DeveloperName }}'">{{ choice.Label }}</option>
            {% endfor %}
          </select>
      </div>
      <input type="hidden" name="filter" id="combined-filter">
      <button type="submit" class="btn btn-primary">Filter</button>
    </form>

    <hr/>
    <a href="/">Clear filter</a>
  </div>
</div>

<script>
  const form = document.getElementById('filter-form');
  const filterLocation = document.getElementById('location-search');
  const filterCategory = document.getElementById('category-select');
  const combinedFilter = document.getElementById('combined-filter');

  form.addEventListener('submit', function(e) {
    e.preventDefault();

    // Get the selected values of the filter elements
    const filterLocationValue = filterLocation.value !== "" ? `contains(location, '${filterLocation.value}')` : "";
    const filterCategoryValue = filterCategory.value;

    const filterValues = [filterLocationValue, filterCategoryValue].filter(function (value) {
      return value !== "";
    });

    // Combine the filter values with the 'and' operator
    const combinedFilterValue = filterValues.join(' and ');

    // Set the combined filter value as the value of the hidden input element
    combinedFilter.value = combinedFilterValue;
    // Submit the form
    form.submit();
  });
</script>