{% extends 'layouts/master-page.html' %}
{% block title %}Vendor browsing{% endblock %}
{% block head %}
<!-- css -->
<link href="{{ url_for('static', filename='css/custom/browse.css') }}" rel="stylesheet" />
<link href="{{ url_for('static', filename='css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />

<!-- javascript -->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script>

{% endblock %}
{% block content %}
  <!-- breadcrumb -->
{% include 'subpages/breadcrumbs.html' %}
  <!-- browse -->
  <table id="vendorTable" class="table table-hover table-striped">
    <thead class="thead-dark">
      <tr>
          <th class="center_header">
            Vendors
          </th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
{% endblock %}
{% block body_scripts %}
<script>
  $(document).ready(function() {
    $('#vendorTable').DataTable( {
        "processing": true,
        "ajax": {
               "url": "{{url_for('home.index')}}browse/fetch_data",
               "type": "POST"
        },
        "columns": [
               { "data": "vendors" ,
                   render : function(data, type, row) {
                      return '<a href="{{ url_for('home.index')}}browse/'+ row['vendors'] + '">'+ row['vendors'] +'</a>'
                   }
               },
           ],
           "iDisplayLength": {{pageLength}},
           "language": { "processing": "<img src='{{ url_for('static', filename='img/ajaxload.gif') }}'> Loading...",
               "zeroRecords": "No records to display", searchPlaceholder: "Regex search...", search: ""},
           "search": {
               "regex": true
           }
       });
} );
</script>

{% endblock %}
