import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';

var WelpListComponent = Ember.Component.extend({
    layout: hbs`
      <div class="row">
        <div class="search-results">
          <div class="search-results__list">
            <ul class="search-results-list">
              {{#each-in items as |key item|}}
              <li class="search-results-list__item">
                <div class="result">
                  <div class="result-left">
                    <img class="result-object img-rounded" src={{item.img}}>
                  </div>
                  <div class="result-mid">
                    <h5 class="result-heading">{{item.name}}</h5>
                    <div class="smallish">{{average item.reviews}} {{#link-to "items.detail" item.id}}{{reviewed item.reviews}}{{/link-to}}</div>
                    <div class="smallish">{{item.price}} {{item.tags}}</div>
                  </div>
                  <div class="result-body">
                    <p class="smallish">{{item.address}}</p>
                  </div>
                </div>
                <div class="result-review">
                  <p>{{item.reviews.0.comment}} {{#link-to "items.detail" item.id}}read more{{/link-to}}</p>
                </div>
              </li>
              {{yield item.id}}
              {{/each-in}}
            </ul>
          </div>
          <div class="search-results__map">
            <div class="search-result-map-box">
              <div class="map-header">
                <h6>Search results</h6>
              </div>
              <div id="map" class="map-container">
                {{welp-map}}
              </div>
            </div>
          </div>
        </div>
      </div>
    `
});

export default WelpListComponent;