block24.html

{% extends 'layouts/base.html' %}

{% block content %}
    <div class="ui stackable grid container">
        <div class="sixteen wide tablet twelve wide computer centered column">
            <a class="ui basic compact button" href="{{ url_for('admin.index') }}">
                <i class="caret left icon"></i>
                Back to dashboard
            </a>
            <h2 class="ui header">
                All Clubs
                <div class="sub header">
                    View and manage current clubs
                </div>
            </h2>

            <div class="ui menu">
                <div class="ui right search item" style="width:100%">
                    <div class="ui transparent icon input">
                        <input id="search-users" type="text" placeholder="Search categories…">
                        <i class="search icon"></i>
                    </div>
                </div>
            </div>

            {# Use overflow-x: scroll so that mobile views don't freak out
             # when the table is too wide #}
            <div style="overflow-x: scroll;">
                <table class="ui searchable sortable unstackable selectable celled table">
                    <thead>
                        <tr>
                            <th>Club Name</th>
                            <th>Categories</th>
                            <th>Showing in Public?</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for c in clubs %}
                        <tr onclick="window.location.href = '{{ url_for('club.club_info', club_id=c.id) }}';">

                            <td>{{ c.name }}</td>
                            <td>{% for c in c.categories %} {{ c.category_name }} {% endfor %}</td>
                            <td {% if c.is_confirmed == False %}style="background-color: rgba(255, 0, 0, 0.8)"{% endif %}>{{ c.is_confirmed }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#search-users').keyup(function () {
                var searchText = $(this).val();
                if (searchText.length > 0) {
                    $('tbody td:icontains(' + searchText + ')').addClass('positive');
                    $('td.positive').not(':icontains(' + searchText + ')').removeClass('positive');
                    $('tbody td').not(':icontains(' + searchText + ')').closest('tr').addClass('hidden').hide();
                    $('tr.hidden:icontains(' + searchText + ')').removeClass('hidden').show();
                } else {
                    $('td.positive').removeClass('positive');
                    $('tr.hidden').removeClass('hidden').show();
                }
            });
        });
    </script>
{% endblock %}