<script>window.baseurl = '{{ site.baseurl }}'</script>

<div class="container border-bottom supports-container">
  <div class="pt-5">
    <h3>Support the Team</h3>

    <div>
      Through contributions, donations, and sponsorship, you allow bootstrap-table to thrive.
    </div>
  </div>

  <div id="supports" style="display: none">
    <div
      v-for="(rank, i) in ranks"
      :key="i"
      class="supports pt-5 pb-5"
    >
      <div>
        <h3><span v-text="rank.title"></span> Sponsors</h3>
      </div>

      <div v-if="rank.title === 'Backer'" class="support-description">
        The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support bootstrap-table.
        Every little bit helps, and we appreciate even the smallest contributions.
        <a href="https://opencollective.com/bootstrap-table#sponsor" target="_blank">
          Become a backer
        </a>
      </div>

      <div v-else class="support-description">
        <b><span v-text="rank.title"></span> Sponsors</b> are those who have pledged $<span v-text="rank.minimum + (rank.maximum ? ' to $' + rank.maximum : ' or more')"></span> to bootstrap-table.
        <a href="https://opencollective.com/bootstrap-table#section-contribute" target="_blank">
          Become a sponsor
        </a>
      </div>

      <div>
        <a
          v-for="support in rank.supports"
          :key="support.slug"
          :href="support.website || 'https://opencollective.com/' + support.slug"
          :title="'$' + support.totalDonations + ' by ' + support.name || support.slug"
          class="support-item"
          target="_blank"
        >
          <img
            :class="rank.title"
            :src="support.avatar"
            :alt="support.name || support.slug"
            class="support-avatar"
          >
        </a>
      </div>
    </div>
  </div>
</div>
