<template id="yancy-component-table">
    <div class="yancy-table">
        <!-- XXX: Move this to some kind of fetcher component that binds
             to an array of items -->
        <div v-if="error">
            Error: {{ error }}
        </div>

        <!-- XXX: Make this and only this the table component -->
        <div class="table-responsive">
            <table class="table">
                <thead class="thead-light">
                    <tr>
                        <th v-for="col in _columns"
                            class="clickable"
                            @click="toggleSort( col )"
                        >
                            <i class="fa" :class="sortClass( col )"></i>
                            {{ col.title || col.field }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="row in items">
                        <tr>
                            <td v-for="col in _columns">
                            <span v-if="col.template" v-html="fillTemplate( col.template, row )"></span>
                            <span v-else>{{ row[col.field] }}</span>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <!-- XXX: Move this to a pager component that modifies a URL -->
        <nav>
            <ul class="pagination">
                <li class="page-item" :class="page == 1 ? 'disabled' : ''">
                    <a class="page-link" href="#" aria-label="First"
                        @click.prevent="fetchPage( 1 )"
                    >
                        <span aria-hidden="true">&laquo;</span>
                        <span class="sr-only">First</span>
                    </a>
                </li>
                <li class="page-item" :class="page == 1 ? 'disabled' : ''">
                    <a class="page-link" href="#" aria-label="Previous"
                        @click.prevent="fetchPage( page - 1 )"
                    >
                        <span aria-hidden="true">&lsaquo;</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item disabled" v-if="pager[0] > 1">
                    <span class="page-link">&hellip;</span>
                </li>
                <li v-for="p in pager" class="page-item"
                    :class="p == page ? 'active': ''"
                >
                    <a class="page-link" href="#" @click.prevent="fetchPage( p )">
                        {{ p }}
                    </a>
                </li>
                <li class="page-item disabled" v-if="pager[ pager.length - 1 ] < totalPages">
                    <span class="page-link">&hellip;</span>
                </li>
                <li class="page-item" :class="page >= totalPages ? 'disabled' : ''">
                    <a class="page-link" href="#" aria-label="Next"
                        @click.prevent="fetchPage( page + 1 )"
                    >
                        <span aria-hidden="true">&rsaquo;</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
                <li class="page-item" :class="page >= totalPages ? 'disabled' : ''">
                    <a class="page-link" href="#" aria-label="Last"
                        @click.prevent="fetchPage( totalPages )"
                    >
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Last</span>
                    </a>
                </li>
            </ul>
        </nav>

    </div>
</template>

%= javascript '/yancy/component/table.js'