{% extends 'site_layout.html.j2' %}
{% set title="Manage Guilds as Administrator" %}

{% block content %}
<h1>Manage Guilds (Admin)</h1>
<p class="flow-text">Select a server to configure Titan Embeds. <strong>(Total server count: {{ servers|length }})</strong></p>
<div class="col s12">
  <div class="card-panel indigo lighten-5 z-depth-3 hoverable">
    <p class="black-text flow-text">Filter by ID</p>
    <div class="row">
      <div class="input-field col s12">
        <input id="guild_id" type="text" class="validate black-text">
        <label for="guild_id">Server/Embed ID</label>
      </div>
    </div>
  </div>
</div>
<div class="row">
  {% for server in servers %}
  <div class="col l4 m6 s12 guild-card" data-guildid="{{ server.guild_id }}">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable">
      <div class="row valign-wrapper">
        <div class="col s3">
          {% if server.icon %}
          <img src="{{ icon_generate(server.guild_id, server.icon) }}" alt="" class="circle responsive-img">
          {% else %}
          <span class="black-text">No icon :(</span>
          {% endif %}
        </div>
        <div class="col s7">
          <span class="black-text">
            <p class="flow-text truncate">{{ server.name|e }}</p>
            <a class="waves-effect waves-light btn" href="{{url_for('admin.administrate_guild', guild_id=server['guild_id'])}}">Modify</a>
          </span>
        </div>
      </div>
      <div class="s12 black-text">
        <p>ID: <code>{{ server.guild_id }}</code></p>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}
{% block script %}
<script>
  $("#guild_id").keyup(function() {
    var guildid = this.value.trim();
    var cards = document.getElementsByClassName("guild-card");
    for (var i = 0; i < cards.length; i++) {
      if (cards[i].dataset.guildid.indexOf(guildid) > -1) {
        cards[i].style.display = "";
      } else {
        cards[i].style.display = "none";
      }
    }
  });
</script>
{% endblock %}