%include('header.tpl', app_name=app_name, message=message, page_name="Server overview")

<!-- Begin Accordion -->
<div id="accordion" role="tablist" aria-multiselectable="true">

  %for server in servers:

    <!-- Begin Server cards -->
    <div class="card">
      <a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapse{{server['port']}}" aria-expanded="false" aria-controls="collapse{{server['port']}}">
        <div class="card-header" role="tab" id="heading{{server['port']}}">
          <h5 class="mb-0">
            <div class="row">
              <div class="col-sm-6">
              {{ server['name'] }}
              </div>
              <div class="col-sm-6 text-xs-right">
                %if server['status'] == "online":
                  <span class="text-success">running</span>
                %else:
                  <span class="text-danger">stopped</span>
                %end
              </div>
            </div>
          </h5>
        </div>
      </a>
      <div id="collapse{{server['port']}}" class="collapse" role="tabpanel" aria-labelledby="heading{{server['port']}}">
        <div class="card-block">
          <h4 class="card-title">{{ server['desc'] }}</h4>
          <table class="table">
            <tr><th>Address:</th><td><code>{{ fqdn }}:{{ server['port'] }}</code></td></tr>
            <tr><th>Version:</th><td>{{ server['version'] }}</td></tr>
            <tr><th>Mods:</th><td>
              %for mod in server['mods']:
                <span class="tag tag-default">{{ mod }}</span>
              %end
            </td></tr>
            <tr><th>Admins:</th><td>0bsidian0rder, Singso</td></tr>
          </table>
          <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-8 text-xs-right">
              %if server['status'] == "online":
                <a href="#" class="btn btn-outline-danger">Stop</a>
              %else:
                <a href="#" class="btn btn-outline-success">Start</a>
              %end
                <a href="/edit/{{server['port']}}" class="btn btn-outline-primary">Edit</a>
            </div>
          </div>
        </div>
      </div>
    </div> <!-- Server cards -->

  %end

</div>
<!-- Accordion -->

%include('footer.tpl', username=username, app_name=app_name)