<%inherit file="main.html" />

<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
%>

<h2>${_("Manage student accounts")}</h2>
<form action="${reverse('disable_account_ajax')}" method="post" data-remote="true" class="manage-accounts-form">
    <label for="username">${_("Username:")}</label>
    <input type="text" id="username" name="username" required="true">
    <br>
    <br>
    <h3>${_("Profile:")}</h3>
    <label for="profile-image">${_("Image:")}</label>
    <img id="profile-image">
    <br>
    <label for="profile-name">${_("Name:")}</label>
    <span id="profile-name"></span>
    <br>
    <br>
    <h3>${_("Choose an action:")}</h3>
    <label for="disable_action">${_("View Profile")}</label>
    <input type="radio" name="account_action" value="" id="view_profile_action" checked="checked">
    <br>
    <label for="disable_action">${_("Disable Account")}</label>
    <input type="radio" name="account_action" value="disable" id="disable_action">
    <br>
    <label for="reenable_action">${_("Reenable Account")}</label>
    <input type="radio" name="account_action" value="reenable" id="reenable_action">
    <br>
    <label for="remove_profile_image_action">${_("Remove Profile Image")}</label>
    <input type="radio" name="account_action" value="remove_profile_image" id="remove_profile_image_action"">
    <br>
    <br>
    <button type="submit">${_("Submit")}</button>
</form>


<p class="account-change-status"></p>
<h2>${_("Students whose accounts have been disabled")}</h2>
<p>${_("(reload your page to refresh)")}</p>
<table id="account-table" border='1'>
    <tr>
        % for header in headers:
        <th>${header}</th>
        % endfor
    </tr>
    % for row in rows:
    <tr>
        % for cell in row:
        <td>${cell}</td>
        % endfor
    </tr>
    % endfor
</table>

<%
PLACEHOLDER_USERNAME = '__PLACEHOLDER_USERNAME'
%>

<script type="text/javascript">
$(function() {
    var form = $(".manage-accounts-form"),
        profileUrl = "${reverse('accounts_api', kwargs={'username': PLACEHOLDER_USERNAME})}",
        removeProfileUrl = "${reverse('profile_image_remove', kwargs={'username': PLACEHOLDER_USERNAME})}",
        refreshProfile;

    refreshProfile = function(username) {
        return $.ajax({
            type: "GET",
            url: profileUrl.replace('${PLACEHOLDER_USERNAME}', username),
            success: function(response) {
                var imageUrl = response["profile_image"]["image_url_medium"];
                $("#profile-image", form).attr("src", imageUrl);
                $("#profile-image", form).attr("src", imageUrl);
                $("#profile-name", form).text(response["name"]);
                $("#view_profile_action", form).attr('checked', 'checked');
                $("#view_profile_action", form).focus();
            }
        });
    };

    form.submit(function(event) {
        event.preventDefault();
        var username = $('#username', form).val(),
            action = $("input:radio[name=account_action]:checked", form).val();
        if (action === 'remove_profile_image') {
            $(".account-change-status").text("${_('working')}");
            $.ajax({
                type: "POST",
                url: removeProfileUrl.replace('${PLACEHOLDER_USERNAME}', username),
                success: function(response) {
                    refreshProfile(username).always(function() {
                        $("#profile-image", form).focus();
                        $(".account-change-status").html("");
                    })
                }
            });
        } else if (action) {
            $(".account-change-status").text("${_('working')}");
            $.ajax({
                type: "POST",
                url: form.attr('action'),
                data: form.serialize(),
                success: function(response) {
                    $(".account-change-status").html(response.message);
                }
            });
        } else {
            refreshProfile(username);
        }
    });
});
</script>