{% extends 'core_main_app/_render/admin/theme/tools/box.html' %}

{% block box_title %}Template XSLT Rendering{% endblock %}

{% block box_tools %}

{% include 'core_main_app/common/buttons/go_to.html' with url=data.url_back_to label='Back to Versions' %}

{% endblock %}

{% block box_body %}
<div id="error-div" style="display: none;">
    <div class="alert alert-danger alert-dismissable">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>{{ data.errors }}</strong>
    </div>
</div>

<form id="form_start" method="post">
    {% csrf_token %}
    {{ data.form_template_xsl_rendering.id }}
    {{ data.form_template_xsl_rendering.template }}
    <div class="w-100 d-flex">
        <div class="card list-card">
            <div class="card-header">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <td>
                               {{ data.form_template_xsl_rendering.list_xslt.label }}
                                <i class="fas fa-info-circle"
                                   data-toggle="tooltip"
                                   data-placement="right"
                                   title="This XSLT will be used to render a list of data (e.g. search results page)"></i>
                            </td>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="card-body">
                <table id="template-table" class="table table-bordered table-striped">
                    <tbody>
                        <tr>
                            <td>
                                {{ data.form_template_xsl_rendering.list_xslt }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card list-card">
            <div class="card-header">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <td>
                                {{ data.form_template_xsl_rendering.list_detail_xslt.label }}
                                <i class="fas fa-info-circle"
                                   data-toggle="tooltip"
                                   data-placement="right"
                                   title="This XSLT will be used to render a single data (e.g. data details page)"></i>
                                </td>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="card-body">
                <table id="data-table" class="table table-bordered table-striped">
                    <tbody>
                        <tr id="empty-data-text" class="bg-transparent text-center">
                            <td>
                                <div class="list-detail-xslt-container">
                                    {{ data.form_template_xsl_rendering.list_detail_xslt }}
                                </div>
                                <div class="card">
                                  <div class="default-detail-header card-body bg-light text-justify">
                                    {{ data.form_template_xsl_rendering.default_detail_xslt.label }}
                                  </div>
                                </div>
                                {{ data.form_template_xsl_rendering.default_detail_xslt }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <br/>
    <button type="submit" class="btn btn-primary float-right">
      <i class="fa fa-save"></i> Save
    </button>
    <a href="{{data.url_back_to}}" class="btn btn-secondary float-right btn-cancel">
        <i class="fa fa-times"></i> Cancel
    </a>
</form>
{% endblock %}