{# This partial template renders a table of all objects, to be populated with rows via an AJAX request.
 # This extends a generic template for paginated tables.
 #
 # Note that this template contains a "skeleton" table with an empty table body, and then a block of Handlebars templates which are used
 # to render the table cells with the data from the AJAX request.
#}

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

{% block table %}
    <table id="{{table.id}}" class="tablesorter table table-bordered table-hover table-striped" data-sortlist="[[0, 1]]">
        <thead>
            <tr>
				<th class="sorter-metatext" data-column-name="id" data-column-template="#answer-table-column-id" data-priority="1">{{translate("ID")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="title" data-column-template="#answer-table-column-title" data-priority="1">{{translate("TITLE")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="text" data-column-template="#answer-table-column-text" data-priority="1">{{translate("TEXT")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="color" data-column-template="#answer-table-column-color" data-priority="1">{{translate("COLOR")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="image" data-column-template="#answer-table-column-image" data-priority="1">{{translate("IMAGE")}} <i class="fa fa-sort"></i></th>
				{% if 'question' in table.columns %}
                    <th class="sorter-metatext" data-column-name="question" data-column-template="#answer-table-column-question" data-priority="1">{{translate('QUESTION')}} <i class="fa fa-sort"></i></th>
                {% endif %}
				<th class="sorter-metatext" data-column-name="is_enabled" data-column-template="#answer-table-column-is_enabled" data-priority="1">{{translate("IS_ENABLED")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="disabled_text" data-column-template="#answer-table-column-disabled_text" data-priority="1">{{translate("DISABLED_TEXT")}} <i class="fa fa-sort"></i></th>
				{% if 'creator' in table.columns %}
                    <th class="sorter-metatext" data-column-name="creator" data-column-template="#answer-table-column-creator" data-priority="1">{{translate('USER')}} <i class="fa fa-sort"></i></th>
                {% endif %}
				<th class="sorter-metanum" data-filter="false" data-column-name="created_at" data-column-template="#answer-table-column-created-at" data-priority="1">{{translate('CREATED_AT')}} <i class="fa fa-sort"></i></th>
				<th data-column-name="actions" data-column-template="#answer-table-column-actions" data-sorter="false" data-filter="false" data-priority="1">{{translate("ACTIONS")}}</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
{% endblock %}

{% block table_cell_templates %}
    {# This contains a series of <script> blocks, each of which is a client-side Handlebars template.
     # Note that these are NOT Twig templates, although the syntax is similar.  We wrap them in the `verbatim` tag,
     # so that Twig will output them directly into the DOM instead of trying to treat them like Twig templates.
     #
     # These templates require handlebars-helpers.js, moment.js
    #}
    {% verbatim %}
	<script id="answer-table-column-id" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
				{{row.id}}
        </td>
    </script>
	<script id="answer-table-column-title" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
				{{row.title}}
        </td>
    </script>
	<script id="answer-table-column-text" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
				{{row.text}}
        </td>
    </script>
	<script id="answer-table-column-color" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
				{{row.color}}
        </td>
    </script>
	<script id="answer-table-column-image" type="text/x-handlebars-template">
		<td valign="middle" align="center">
				{{#if row.image }}
				<img src="answers/img/{{row.image}}" width="100" />
				{{/if }}
		</td>
    </script>
	<script id="answer-table-column-question" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
				{{row.question.title}}
        </td>
    </script>
	
	<script id="answer-table-column-is_enabled" type="text/x-handlebars-template">
        <td>
	        {{#if row.is_enabled }}
				Yes
	        {{ else }}
	            No
	        {{/if }}
        </td>
    </script>
	
	<script id="answer-table-column-disabled_text" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
				{{row.disabled_text}}
        </td>
    </script>
	
	<script id="answer-table-column-creator" type="text/x-handlebars-template">
        <td data-text="{{row.creator.last_name}}">
            {{#if row.creator }}
                <strong>
                    <a href="{{site.uri.public}}/users/u/{{row.creator.user_name}}">{{row.creator.first_name}} {{row.creator.last_name}} ({{row.creator.user_name}})</a>
                </strong>
                <div class="js-copy-container">
                    <span class="js-copy-target">{{row.creator.email}}</span>
                    <button class="btn btn-xs uf-copy-trigger js-copy-trigger"><i class="fa fa-copy"></i></button>
                </div>
            {{ else }}
                <i>{% endverbatim %}{{translate("USER.DELETED")}}{% verbatim %}</i>
            {{/if }}
        </td>
    </script>
	<script id="answer-table-column-created-at" type="text/x-handlebars-template">
        {{#if row.created_at }}
        <td data-num="{{dateFormat row.created_at format='x'}}">
            {{dateFormat row.created_at format="dddd"}}<br>{{dateFormat row.created_at format="MMM Do, YYYY h:mm a"}}
        </td>
        {{ else }}
        <td data-num="0">
            <i>{% endverbatim %}{{translate("UNKNOWN")}}{% verbatim %}</i>
        </td>
        {{/if }}
    </script>
    <script id="answer-table-column-actions" type="text/x-handlebars-template">
        <td class="uf-table-fit-width">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">{% endverbatim %}{{translate("ACTIONS")}}{% verbatim %}<span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right-responsive" role="menu">
                    <li>
		<a href="#" class="js-displayForm-table" data-toggle="modal" data-formUrl="api/answers/{{row.id}}/edit"><i class="fa fa-edit"></i> {% endverbatim %}{{translate("ANSWER.EDIT")}}{% verbatim %}</a>
                    </li>
                    <li>
						<a href="#" class="js-displayConfirm-table" data-confirm-title="{% endverbatim %}{{translate("ANSWER.DELETE")}}{% verbatim %}" data-confirm-message="{% endverbatim %}{{translate("ANSWER.DELETE_CONFIRM")}}{% verbatim %}" data-confirm-button="{% endverbatim %}{{translate("ANSWER.DELETE_YES")}}{% verbatim %}" data-post-url="api/answers/{{row.id}}" data-post-method="DELETE" data-toggle="modal">
						<i class="fa fa-trash-alt"></i> {% endverbatim %}{{translate("ANSWER.DELETE")}}{% verbatim %}
						</a>
                    </li>
                </ul>
            </div>
        </td>			
    </script>
    {% endverbatim %}
{% endblock %}