<!-- search bar -->
<div class="container search-bar">
  <div class="search-bar-outer">
    <div class="search-bar-inner">
      <form action="/search">
        <h4 class="mb-2">尋找餐廳：</h4>
        <div class="input-group">
          <input type="text" name="keyword" class="form-control" placeholder="輸入餐廳、分類" aria-label="Restaurant Name..."
            value="{{keyword}}" aria-describedby="search-button">
          <div class="input-group-append">
            <button class="btn btn-major" type="submit" id="search-button"><i class="fas fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- restaurant list -->
<div class="container mt-5">
  <div class="row">
    <div class="col-md-10 col-12 mx-auto">
      {{!-- Add icon --}}
      <div class="button-group mb-3">
        <a class="btn btn-info mr-4" href="/restaurant/new" role="button">Add restaurant</a>
      </div>

      <div class="card-columns">
        {{#each restaurants}}
        <a href="/restaurants/{{this.id}}" class="text-secondary">
          <div class="card mb-3">
            <img class="card-img-top" src="{{this.image}}" alt="{{this.name}}">
            <div class="card-body p-3">
              <h6 class="card-title mb-1">{{this.name}}</h6>

              <div class="restaurant-category mb-1">
                <i class="fas fa-utensils pr-2"></i> {{this.category}}
              </div>

              <span class="badge badge-pill badge-danger font-weight-normal">
                {{this.rating}}
                <i class="fas fa-star fa-xs"></i>
              </span>
            </div>
          </div>
        </a>
        {{/each}}
      </div>
    </div>
  </div>
</div>