{# Product details #}
<div class="row">

  <div class="col-sm-12">
    <h1 style="margin-top: 0">
      <span class="pull-right">
        <small>
          <a class="btn btn-link"
             href="/report/performance?product={{ product.id }}">
            <i class="fa fa-fw fa-line-chart"></i>
            <span class="sr-only">Product performance chart</span>
          </a>
          <a class="btn btn-link"
             href="{{ PUBLIC_CATALOG ~ '/' ~ product.full_slug }}"
             target="_blank">
            <i class="fa fa-external-link"></i>
            <span class="sr-only">Product on public website</span>
          </a>
        </small>
      </span>
      {{ product.name }}
      <small>
        {% set brand = product.brand %}
        <a href="{{ url_for('catalog-brand', { 'brand' : brand.slug }) }}">
          {{ brand.name }}
        </a>
      </small>
    </h1>

    <div class="input-group">
      <span class="input-group-addon">Inventoried</span>
      {%- set last= product.last_inventoried -%}
      <input type="text" class="form-control" disabled style="color: #000" value="{{ last ? last|date("F j, Y") : 'Never' }}" aria-describedby="basic-addon1">
    </div>
    <hr style="border-color: rgba(0,0,0,0.1)">
  </div>

  <div class="col-sm-4">
    {% set media = product.media %}
    {% if media is not empty %}
      {{ include('carousel.twig', { images: product.media, edit: 'edit-media' }) }}
    {% endif %}
  </div>
  <div class="col-sm-8">
    <div class="content">
      {{ product.description | replace({'{{ @STATIC }}' : STATIC}) | markdown }}
    </div>
  </div>
</div>

<script>
  scat.handleAction('click', 'edit-media', (act) => {
    return scat.dialog('/catalog/product/{{ product.id }}/media')
  })
</script>
