%include('header.tpl', app_name=app_name, message=message)
<!-- Begin page content -->
<div class="container">
  <div class="row">
    <div class="col-sm-8">
    <h1>Server overview</h1>
    </div>
    <div class="col-sm-4 text-xs-right">
      <div class="btn-group">
        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{ username }}
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="/">Server overview</a>
          <a class="dropdown-item" href="#">Create server</a>
          <a class="dropdown-item" href="#">About</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/logout">Logout</a>
        </div>
      </div>
    </div>
  </div>
  <p class="lead">Control your <a href="http://factorio.com">Factorio</a> game servers from here.</p>

<!--  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Version</th>
        <th>Port</th>
        <th>Status</th>
        <th class="text-xs-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      %for server in servers:
        %if server['status'] == "online":
          <tr>
          <th>{{ server['name'] }}</th>
            <td>{{ server['version'] }}</td>
            <td>{{ server['port'] }}</td>
            <td><span class="tag tag-success">{{ server['status'] }}</span></td>
            <td class="text-xs-right">
              <a href="/stop/{{ server['port' ]}}" type="button" class="btn btn-outline-danger btn-sm">Stop</a>
              <a href="/server/{{ server['port'] }}" type="button" class="btn btn-outline-primary btn-sm">Edit</a>
            </td>
          </tr>
        %else:
          <tr>
            <th>{{ server['name'] }}</th>
            <td>{{ server['version'] }}</td>
            <td>{{ server['port'] }}</td>
            <td><span class="tag tag-danger">{{ server['status'] }}</span></td>
            <td class="text-xs-right">
              <a href="/start/{{ server['port'] }}" type="button" class="btn btn-outline-success btn-sm">Start</a>
              <a href="/delete/{{ server['port'] }}" type="button" class="btn btn-outline-danger btn-sm">Delete</a>
              <a href="/server/{{ server['port'] }}" type="button" class="btn btn-outline-primary btn-sm">Edit</a>
            </td>
          </tr>
        %end
      %end
    </tbody>
  </table>
-->

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

  %for server in servers:
    <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="tag tag-success">{{server['status']}}</span>
            %else:
              <span class="tag tag-danger">{{server['status']}}</span>
            %end
            </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>factorio.bla.com:{{ server['port'] }}</td></tr>
      <tr><th>Version</th><td>{{ server['version'] }}</td></tr>
      <tr><th>Admins</th><td><span class="tag tag-default">0bsidian0rder</span></td></tr>
    </table>
    <div class="row">
      <div class="col-sm-4">
      </div>
      <div class="col-sm-8 text-xs-right">
        <a href="#" class="btn btn-outline-success">Start</a>
        <a href="#" class="btn btn-outline-danger">Stop</a>
        <a href="/server/{{server['port']}}" class="btn btn-outline-primary">Edit</a>
      </div>
    </div>
      </div>
    </div>
  </div>
  %end
</div>


</div> <!-- Page content -->
%include('footer.tpl', username=username)