<div class="row inc-search-header header">
  <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4 text-left">

    <h1 class="page-title txt-color-blueDark" v-if="typeof(page.title) === 'string'"><%= __('view.list.title') %><span><h2 class="txt-color-grayDark">——{{ page.title }}</h2></span></h1>

  </div>

  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8 text-right">

    <div class="search-box">
      <input type="text" 
      :class="{ 'not-empty': source.filter.search.keyword && (source.filter.search.keyword !== '') }"
      placeholder="Search" 
      v-model="source.filter.search.keyword"
      @keypress.enter="apiActions({ action: 'search' })">
      <a class="search" role="button"
      @click="apiActions('search')">
        <i class="material-icons search">search</i>
      </a>
      <a class="cancel" role="button"
      @click="apiActions({ action: 'clean' })">
        <i class="material-icons cancel">cancel</i>
      </a>
    </div>

  </div>
</div>
