[% USE KohaDates %]

[% IF enrollments %]

    <h4>Clubs currently enrolled in</h4>

    <table id="clubs-table-enrolled" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Date enrolled</th>
                <th>&nbsp;</th>
            </tr>
        </thead>

        <tbody>
            [% FOREACH e IN enrollments %]
                <tr>
                    <td>[% e.club.name %]</td>
                    <td>[% e.club.description %]</td>
                    <td>[% e.date_enrolled | $KohaDates %]</td>
                    [% IF e.club.club_template.is_enrollable_from_opac %]
                        <td>
                            <button class="btn btn-xs btn-default" onclick="cancelEnrollment( [% e.id %] )">
                                <i class="icon-remove"></i> Cancel enrollment
                            </button>
                        </td>
                    [% END %]
                </tr>
            [% END %]
        </tbody>
    </table>
[% END %]

[% IF clubs %]

    <h4>Clubs you can enroll in</h4>

    <table id="clubs-table-unenrolled" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>&nbsp;</th>
            </tr>
        </thead>

        <tbody>
            [% FOREACH c IN clubs %]
                <tr>
                    <td>[% c.name %]</td>
                    <td>[% c.description %]</td>
                    <td>
                        [% IF !c.club_template.is_email_required || ( c.club_template.is_email_required && borrower.first_valid_email_address ) %]
                            <button class="btn btn-xs btn-default" onclick="loadEnrollmentForm([% c.id %])">
                                <i class="icon-plus"></i> Enroll
                            </button>
                        [% ELSE %]
                            <span class="hint">You must have an email address to enroll</span>
                        [% END %]
                    </td>
                </tr>
            [% END %]
        </tbody>
    </table>
[% END %]

<script type="text/javascript">
function loadEnrollmentForm( id ) {
    $("body").css("cursor", "progress");
    $('#opac-user-clubs').load('/cgi-bin/koha/clubs/enroll.pl?borrowernumber=[% borrower.borrowernumber %]&id=' + id, function() {
        $("body").css("cursor", "default");
    });

    return false;
}

function cancelEnrollment( id ) {
    $("body").css("cursor", "progress");
    $.ajax({
        type: "POST",
        url: '/cgi-bin/koha/svc/club/cancel_enrollment',
        data: { id: id },
        success: function( data ) {
            if ( data.success ) {
                $('#opac-user-clubs').load('/cgi-bin/koha/clubs/clubs-tab.pl?borrowernumber=[% borrower.borrowernumber %]', function() {
                    $("body").css("cursor", "default");
                });
            } else {
                alert(_("Unable to cancel enrollment!"));
            }
        },
        dataType: 'json'
    });
    return false;
}
</script>