<div class="ui top attached right aligned basic segment">
    <button type="button" class="ui mini tertiary icon button" id="refresh_button">
        <i class="sync alternate icon"></i>
    </button>
    <button type="button" class="ui mini tertiary icon button" id="up_button">
        <i class="arrow up icon"></i>
    </button>
</div>
<table class="ui table" id="projects">
    <thead>
    <tr>
        <th>Proyecto</th>
    </tr>
    </thead>
    <tbody>
    @foreach($projects as $project)
        <tr data-index="{{$project->id}}">
            <td class="link" colspan="2">{{$project->descripcion}}</td>
        </tr>
    @endforeach
    </tbody>
</table>

@push('page_scripts')
    <script>
        $(document).ready(function () {
            document.querySelectorAll('#projects td.link').forEach(column => {
                column.style.cursor = 'pointer'
                column.addEventListener('click', () => {
                    const index = column.parentNode.dataset.index
                    if (typeof brokers.data.contracts[index] !== 'undefined') {
                        brokers.data.project_id = index
                        brokers.draw().brokers(index)
                        return
                    }
                    brokers.get().contracts(index)
                })
            })

            document.getElementById('refresh_button').addEventListener('click', () => {
                if (brokers.data.project_id === null) {
                    return
                }
                brokers.actions().refresh()
            })

            document.getElementById('up_button').addEventListener('click', () => {
                brokers.actions().up()
            })
        })
    </script>
@endpush
