{% extends "layout-full.html" %}
{% block title %}
<title>Browse projects on {{cfg("sr.ht", "site-name")}}</title>
{% endblock %}
{% block body %}
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <h3>Browse public projects</h3>
      <form>
        <input
          name="search"
          type="text"
          placeholder="Search all public projects"
          class="form-control {% if search_error %}is-invalid{% endif %}"
          value="{{search or ""}}" />
        {% if search_error %}
          <div class="invalid-feedback">{{ search_error }}</div>
        {% endif %}
        <fieldset class="pull-right d-none d-sm-block" style="margin-top: 0.25rem">
          <legend class="inline-legend">Sort results by</legend>
          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              name="sort"
              id="sort-recently-updated"
              value="recently-updated"
              {% if sort == "recently-updated" or not sort %}
              checked
              {% endif %}
              >
            <label class="form-check-label" for="sort-recently-updated">
              Recently updated
            </label>
          </div>
          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              name="sort"
              id="sort-longest-active"
              value="longest-active"
              {% if sort == "longest-active" %}
              checked
              {% endif %}
              >
            <label class="form-check-label" for="sort-longest-active">
              Longest active
            </label>
          </div>
          <button type="submit" class="btn btn-default">
            Apply {{icon("caret-right")}}
          </button>
        </fieldset>
        <div class="clearfix"></div>
      </form>
      <div class="event-list">
        {% for project in projects %}
        <div class="event">
          <h4>
            <a href="{{url_for("users.summary_GET",
              username=project.owner.username)}}"
            >{{project.owner.canonical_name}}</a>/<a
              href="{{url_for("projects.summary_GET",
                owner=project.owner.canonical_name,
                project_name=project.name)}}"
            >{{project.name}}</a>
          </h4>
          <p>{{project.description}}</p>
          {% if project.tags %}
          <div class="tags">
          {% for tag in project.tags %}
            <a href="{{url_for("public.project_index", search="#"+tag)}}"
               class="tag" rel="nofollow">#{{tag}}</a>
          {% endfor %}
          </div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
      {{pagination()}}
    </div>
    <div class="col-lg-4">
      <h3>Featured projects</h3>
      <div class="event-list">
        {% for feature in features %}
        <h5>
          <span class="text-muted"
          >{{feature.project.owner.canonical_name}}/</span><a
            href="{{url_for("projects.summary_GET",
              owner=feature.project.owner.canonical_name,
              project_name=feature.project.name)}}"
          >{{feature.project.name}}</a>
          {% if feature.project.tags %}
          <span class="tags pull-right">
          {% for tag in feature.project.tags %}
            <a href="{{url_for("public.project_index",
                  search=((search or "").strip() + " #"+tag).lstrip())}}"
               class="tag" rel="nofollow">#{{tag}}</a>
          {% endfor %}
          </span>
          {% endif %}
        </h5>
        <blockquote style="margin-top: 0.5rem">
          {{feature.summary | md}}
        </blockquote>
        {% endfor %}
        <a
          href="{{url_for("public.featured_projects")}}"
          class="btn btn-default btn-block"
        >More featured projects {{icon('caret-right')}}</a>
      </div>
    </div>
  </div>
</div>
{% endblock %}
