{% extends "tables/table-paginated.html.twig" %}

{% block table %}
    <table id="{{table.id}}" class="tablesorter table table-bordered table-hover table-striped" data-sortlist="{{table.sortlist}}">
        <thead>
            <tr>
                <th class="sorter-metatext" data-column-name="Name" data-column-template="#display-table-column-name">Name <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="Discription" data-column-template="#display-table-column-discription">Discription <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="Display_Content" data-column-template="#display-table-column-display-content">Display Content <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="Location" data-column-template="#display-table-column-location">Location <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="Size" data-column-template="#display-table-column-size">Size <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="Type" data-column-template="#display-table-column-type">Type <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="OS" data-column-template="#display-table-column-os">OS <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="IP_Address" data-column-template="#display-table-column-ip-address">IP Address <i class="fa fa-sort"></i></th>
                <th class="sorter-metatext" data-column-name="Enabled" data-column-template="#display-table-column-enabled">Enabled <i class="fa fa-sort"></i></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
{% endblock %}

{% block table_cell_templates %}

    {% verbatim %}
    <script id="display-table-column-name" type="text/x-handlebars-template">
        <td data-text="{{row.Name}}">
            {{row.Name}}
        </td>
    </script>

    <script id="display-table-column-discription" type="text/x-handlebars-template">
        <td data-text="{{row.Discription}}">
            {{row.Discription}}
        </td>
    </script>

    <script id="display-table-column-display-content" type="text/x-handlebars-template">
        <td data-text="{{row.Display_Content}}">
            {{row.Display_Content}}
        </td>
    </script>

    <script id="display-table-column-location" type="text/x-handlebars-template">
        <td data-text="{{row.Location}}">
            {{row.Location}}
        </td>
    </script>

    <script id="display-table-column-size" type="text/x-handlebars-template">
        <td data-text="{{row.Size}}">
            {{row.Size}} - {{row.Resolution}}
        </td>
    </script>

    <script id="display-table-column-type" type="text/x-handlebars-template">
        <td data-text="{{row.Type}}">
            {{row.Type}}
        </td>
    </script>

    <script id="display-table-column-os" type="text/x-handlebars-template">
        <td data-text="{{row.OS}}">
            {{row.OS}}
        </td>
    </script>

    <script id="display-table-column-ip-address" type="text/x-handlebars-template">
        <td data-text="{{row.IP_Address}}">
            {{row.IP_Address}}
        </td>
    </script>

    <script id="display-table-column-enabled" type="text/x-handlebars-template">
          <td
          {{#ifx row.Enabled '==' 0 }}
                      data-text="disabled"
                  {{ else }}
                      data-text="enabled"
                  {{/ifx }}
                  >

              <div class="btn-group">
                  {{#ifx row.Enabled '==' 0 }}
                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              Disabled
                          <span class="caret"></span>
                      </button>
                  {{ else }}
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                Enabled
                              <span class="caret"></span>
                          </button>
                      {{/ifx }}
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                      <li>
                          <a href="#" data-user_name="{{row.Name}}" class="js-display-edit">
                          <i class="fa fa-edit"></i>Edit Display
                          </a>
                      </li>
                      <li>
                      {{#ifx row.Enabled '==' 1 }}
                          <a href="#" data-user_name="{{row.Name}}" class="js-display-disable">
                          <i class="fa fa-minus-circle"></i>Disable Display
                          </a>
                      {{ else }}
                          <a href="#" data-user_name="{{row.Name}}" class="js-display-enable">
                          <i class="fa fa-plus-circle"></i>Enable Display
                          </a>
                      {{/ifx }}
                      </li>
                      <li>
                          <a href="#" data-user_name="{{row.Name}}" class="js-display-delete">
                          <i class="fa fa-trash-o"></i>Delete Display
                          </a>
                      </li>
                  </ul>
              </div>
          </td>
      </script>

    {% endverbatim %}

{% endblock %}