---
layout: default
title: Downloads
permalink: /downloads
---

<div id="downloads-page">
  <h1>Downloads</h1>
  <div class="downloads-inputs">
    <div class="downloads-search">
      <label class="search-wrapper">
        <input type="text" id="search" placeholder="Search for CircuitPython boards" />
      </label>
    </div>
    <div class="downloads-filter">
      <button class="filter"><i class="fas fa-sliders-h"></i></button>
    </div>
    <div class="downloads-filter-tags">
    </div>
  </div>
  <div class="downloads-filter-content">
    <div class="filter-buttons">
      <button class="save-changes"><i class="fas fa-times"></i></button>
    </div>
    <div>
      <div class="manufacturers">
        <h2>Manufacturers</h2>
        <ul class="content"></ul>
      </div>
      <div class="features">
        <h2>Features</h2>
        <ul class="content"></ul>
      </div>
      <div class="sort-by">
        <h2>Sort By</h2>
        <ul class="content">
          <li><input type="radio" name="sort-by" value="downloads" checked> Downloads</li>
          <li><input type="radio" name="sort-by" value="alpha-asc"> Board Name (A to Z)</li>
          <li><input type="radio" name="sort-by" value="alpha-desc"> Board Name (Z to A)</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="downloads-section">
    {% comment %}
      The following are boards that are in the _data/files.json build
      process. Seperate loops due to wanting to sort by download count first.
    {% endcomment %}
    {% assign boards = site.data.files | sort: "downloads" | reverse %}
    {% for board in boards %}
      {% assign info = site.board | where: 'board_id', board.id %}
      {% if info.size == 0 %}
        {% assign info = site.board | where: 'board_id', 'unknown' %}
      {% endif %}
      {% assign info = info[0] %}

      {% if info.downloads_display == false %}
        {% continue %}
      {% endif %}
      
      <div class="download" data-id="{{ board.id }}"
                            data-name="{{ info.name | default: board.id }}"
                            data-downloads="{{ board.downloads }}"
                            data-manufacturer="{{ info.manufacturer }}"
                            data-features="{{ info.features | join: ','}}">
        <a href="{{ info.url | relative_url }}">
          <div>
            <div class="img-responsive-4by3">
              <img src="{{ info.board_image | relative_url }}">
            </div>
            <div class="details">
              <h3>{{ info.name | default: board.id }}</h3>
              By {{ info.manufacturer }}
            </div>
          </div>
        </a>
      </div>
    {% endfor %}

    {% comment %}
      The following are boards that are not yet in the _data/files.json build
      process and have no downloads.
    {% endcomment %}
    {% for board in site.board %}
      {% assign info = site.data.files | where: 'id', board.board_id | first %}
      {% if info == nil and board.board_id != 'unknown' %}
        <div class="download" data-id="{{ board.board_id }}"
                              data-name="{{ board.name }}"
                              data-downloads="0"
                              data-manufacturer="{{ board.manufacturer }}"
                              data-features="{{ board.features | join: ','}}">
          <a href="{{ board.url | relative_url }}">
            <div>
              <div class="img-responsive-4by3">
                <img src="{{ board.board_image | relative_url }}">
              </div>
              <div class="details">
                <h3>{{ board.name }}</h3>
                By {{ board.manufacturer }}
              </div>
            </div>
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<script src="/assets/javascript/downloads.js"></script>