<div ng-app ng-init="platser = ['Göteborg', 'Stockholm', 'Malmö', 'Norköping', 'Jonköping', 'Karlstad', 'Skåne', 'Borås', 'Mariastad', 'Västerås']">
  <form name="train" class="uk-padding">
    <legend class="uk-legend">Boka tåg l 2019-02-20</legend>
    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon" uk-icon="icon: user"></span>
            <input class="uk-input" type="text" placeholder="Namn" name="user" ng-model="user" required>
        </div>
      <span ng-if="train.user.$touched && train.user.$invalid"><span uk-icon="warning"></span> Fyll i ditt namn</span>
    </div>
    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon" uk-icon="icon: receiver"></span>
            <input class="uk-input" type="number" placeholder="Telefon Nummer" name="telefon" ng-model="telefon" required>
        </div>
    </div>
     <div class="uk-margin">
        <div class="uk-form-label">Välj plats:</div>
        <div class="uk-form-controls uk-form-controls-text" required>
          <label><input class="uk-radio" type="radio" name="fönster">  Fönster</label><br>
          <label><input class="uk-radio" type="radio" name="gång"> Gång</label><br>
          <label><input class="uk-radio" type="radio" name="tyst"> Tyst Avdelning</label>
        </div>
    </div>
     <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon" uk-icon="icon: location"></span>
            <input class="uk-input" type="text" placeholder="Välj stad" name="stad" ng-model="searchterm" required>
        </div>
       <ul>
        <li ng-repeat="x in platser | filter:searchterm">
          {{ x }}
        </li>
      </ul>
    </div>
     <div ng-if="train.$valid" class="uk-margin">
        <div class="uk-inline">
          <input class="uk-input" type="submit" placeholder="boka" name="boka" ng-model="boka" required>
        </div>
    </div>
  </form>
  <div ng-if="train.$submitted">
    <table class="uk-table uk-table-hover uk-table-divider">
      <div class="uk-alert-success" uk-alert>
        <a class="uk-alert-close" uk-close></a>
        <p style="text-align:center;color:#000;">Bokning lyckades. Tack för att du valde oss!</p>
      </div>
      <thead>
        <tr>
          <th>Namn</th>
          <th>Telefon Nummer</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ namn }}</td>
          <td>{{ telefon }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>