{% extends "epic/base_layout.html" %}
{% load humanize %}

{% block buttons %}
  <a class="btn btn-default" href="{% url 'epic:vendor_list' %}">
    Up <i class="glyphicon glyphicon-chevron-up"></i>
  </a>
{% endblock buttons %}

{% block content %}
{{ block.super }}

<table class="table table-bordered table-hover table-striped"
       style="background-color: white">
  {% for field in fields %}
  <tr>
    <td style="width:20em"><strong>{{ field.0 }}</strong></td>
    <td>{{ field.1|safe }}</td>
  </tr>
  {% endfor %}
</table>

<p>
  <a class="btn btn-primary"
     href="{% url 'epic:vendor_edit' vendor.id %}">
    Edit <i class="glyphicon glyphicon-edit"></i>
  </a>
  <a class="btn btn-danger" href="{% url 'epic:vendor_delete' vendor.id %}"
     onclick="return confirm ('Are you sure you want to delete this vendor?')">
    Delete <i class="glyphicon glyphicon-remove"></i></a>
</p>

<div class="panel-group" id="accordion" role="tablist">

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h2 class="panel-title">
	<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
	  Vendor Parts
	</a>
      </h2>
    </div>
    <div id="collapse1" class="panel-collapse collapse {% if 'vpg' in request.GET %}in{% endif %}" role="tabpanel">
      {{ vps_pager|safe }}
      <table class="table table-bordered table-hover table-striped"
             style="background-color: white">
	<thead>
	  <tr>
	    <th>Part #</th><th>Manufacturer Part #</th>
	    <th>Vendor Part #</th><th>Price</th>
	  </tr>
	</thead>
	<tbody>
	  {% for vp in vps %}
	  <tr>
	    <td>{{ vp.part.html_link|safe }}</td>
	    <td>{{ vp.part.mfg }} {{ vp.part.mfg_pn }}</td>
	    <td>{{ vp.html_link|safe }}</td>
	    <td>$&nbsp{{ vp.price|floatformat:6|intcomma }}</td>
	  </tr>
	  {% endfor %}
	</tbody>
      </table>
      {{ vps_pager|safe }}
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h2 class="panel-title">
	<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
	  Orders and Shipments from {{ vendor }}
	</a>
      </h2>
    </div>
    <div id="collapse2" class="panel-collapse collapse in" role="tabpanel">
      {{ txtns_pager|safe }}
      <table class="table table-bordered table-hover table-striped"
             style="background-color: white">
	<thead>
	  <tr>
	    <th>Date</th><th>Transaction</th><th>Notes</th>
	  </tr>
	</thead>
	<tbody>
	  {% for txtn in txtns %}
	  <tr>
	    <td>{{ txtn.ts|date:"Y‑m‑d" }}</td>
	    <td>{{ txtn.description|safe }}</td>
	    <td>{{ txtn.notes|linebreaksbr }}</td>
	  </tr>
	  {% endfor %}
	</tbody>
      </table>
      {{ txtns_pager|safe }}
    </div>
  </div>

</div>

{% endblock content %}