{% extends base_layout %}

{% block title %}
  {% trans %}Add Aid{% endtrans %} - {{ app_name }}
{% endblock %}
{% block header_title %}
  {% trans %}Add Aid{% endtrans %}
{% endblock %}
{% block mediaCSS %}
  <link rel="stylesheet" href="/{{ theme }}/css/jquery.dataTables.css">
{% endblock %}

{% block content %}
  {% set show_fields = ['name', 'qty', 'cost', 'supplier', 'tags'] %}
  <div class="container">
    <div class="row">
      <div class="span12">
        <h3>View Aids</h3>
      </div>
    </div>
    <div class="row">
      <div class="span12">
        <div class="aid_customer_details">
          <form class="form-inline" action="">
            <div class="span2">
              <label for="client_age">Client Age</label><input type="number" name="age" class="input-mini"
                                                               id="client_age"/>
            </div>
            <div class="span2">
              <label>
                Male
                <input type="radio" name="sex" value="male">
              </label>
              <label>
                Female
                <input type="radio" name="sex" value="female">
              </label>
            </div>
            <div class="span3">
              <label for="client_life_expectancy">Life Expectancy</label><input type="number" name="life-expectancy"
                                                                                class="input-mini"
                                                                                id="client_life_expectancy"/>
            </div>
            <div class="span3">
              <p id="life_left"></p>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="row top-buffer">
      <div class="span6">
        <div class="aid_table_select">
          <table id="aid_table">
            <thead>
            <tr>
              <th><input type="checkbox" class="checkbox" name="check-all" id="check-all"/></th>
              {% for fld in show_fields %}
                <th>{{ fld }}</th>
              {% endfor %}
            </tr>
            </thead>
            <tbody>
            {% for row in table_data %}
              <tr>
                <td><input type="checkbox" class="checkbox" name="cb1" id="{{ row.key.id() }}"/></td>
                <td><a href="/add_aid/?aid_id={{ row.key.urlsafe() }}" target="_blank">{{ row.name }}</a></td>
                <td><input type="number" value="1" class="input-mini qty" id="{{ row.key.id() }}-qty"></td>
                <td>{{ "$%.2f"|format(row.cost) }}</td>
                <td>{{ row.supplier.get().name }}</td>
                <td>
                  {% for tag in row.tags %}
                    {{ tag }}<br/>
                  {% endfor %}
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="span6">
        <div class="copy-table">
          <table id="ctable">
            <thead>
            <tr>
              <th>Image</th>
              <th>Name</th>
              <th>Supplier</th>
              <th>Initial Cost<br/>per Item</th>
              <th>Maintenance<br/>per year</th>
              <th>Replacement<br/>Frequency</th>
              <th>Quantity</th>
              <th>Cost per year</th>
              <th>Lifetime Cost</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
            <tr>
              <td colspan="7" class="grand_total_title">Total</td>
              <td class="cost_per_year_price" id="cost_per_year_price"></td>
              <td class="grand_total_price" id="grand_total_price"></td>
            </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
  </div>
{% endblock %}
{% block mediaJS %}
  <script src="/{{ theme }}/js/jquery.js"></script>
  <script src="/{{ theme }}/js/jquery.dataTables.min.js"></script>
  <script src="/{{ theme }}/js/view_aids_utilities.js"></script>
{% endblock %}