%include('header.tpl', app_name=app_name, message=message, page_name="Create server")

  <div class="card">
      <a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseOverview" aria-expanded="false" aria-controls="collapseOverview">
      <div class="card-header" role="tab" id="headingOverview">
        <h5 class="mb-0">
          Name and description
          </h5>
        </div>
      </a>

    <div id="collapseOverview" class="collapse in" role="tabpanel" aria-labelledby="headingOverview">
      <div class="card-block">

        <form>
          <div class="form-group">
            <label for="createInputName">Server name:</label>
            <input type="text" class="form-control" id="createInputName" aria-describedby="nameHelp">
            <small id="nameHelp" class="form-text text-muted">This will be visible to clients.</small>
          </div>
          <div class="form-group">
            <label for="createInputDesc">Server description:</label>
            <input type="text" class="form-control" id="createInputDesc" aria-describedby="descHelp">
            <small id="descHelp" class="form-text text-muted">This will be visible to clients.</small>
          </div>

          <div class="form-group">
            <label for="createInputFile">Savegame:</label>
            <input type="file" class="form-control-file" id="createInputFile" aria-describedby="fileHelp">
            <small id="fileHelp" class="form-text text-muted">You can import your own map by uploading a savegame(.zip) here. If left empty a new map will be generated.</small>
          </div>
          <div class="row">
            <div class="col-sm-8">
            </div>
            <div class="col-sm-4 text-xs-right">
              <button type="submit" class="btn btn-outline-success">Create new server</button>
            </div>
          </div>

        </form>

      </div>
    </div>
  </div>


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