%include('header.tpl', app_name=app_name, message=message)
<!-- Begin page content -->
<div class="container">
  <div class="row">
    <div class="col-sm-8">
    <h1>Servers</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>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Create server</a>
          <a class="dropdown-item" href="#">Create server from .zip</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> <!-- Page content -->
%include('footer.tpl', username=username)