{% extends "webadmin/base.html" %}
{% load i18n %}

{% comment %}
<!--
  Copyright (C) 2011-2013 University of Dundee & Open Microscopy Environment.
  All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
{% endcomment %}

{% block title %}{% trans "My account" %}{% endblock %}

{% block link %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "webgateway/css/ome.table.css"|add:url_suffix %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% static "3rdparty/jquery.tablesorter-2.0.3/jquery.tablesorter.css" %}" type="text/css" media="screen"/>
    
    <link rel="stylesheet" href="{% static "3rdparty/jquery.chosen-1.2.0/chosen.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% static "webadmin/css/chosen.css"|add:url_suffix %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% static "webadmin/css/drivespace.css"|add:url_suffix %}" type="text/css"/>
{% endblock %}

{% block script %}
    {{ block.super }}

    <script type="text/javascript" src="{% static "3rdparty/jquery.tablesorter-2.0.3/jquery.tablesorter.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/jquery.quicksearch-1.0.js" %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/jquery.form-3.51.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/jquery.flot-0.7/jquery.flot.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/jquery.flot-0.7/jquery.flot.pie.js" %}"></script>
    
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{% static "3rdparty/jquery.flot-0.7/excanvas.js" %}"></script><![endif]-->
    
    <script type="text/javascript" src="{% static "3rdparty/jquery.chosen-1.2.0/chosen.jquery.js" %}"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function () {
        
        $("#id_default_group").chosen({disable_search_threshold:5, placeholder_text:'Change your default group'});
        
        $("#groupTable").tablesorter( {
            //sortList: [[1,0]]
            headers: {0: { sorter: 'digit' } }
            } );
        $('input#id_search').quicksearch('table#groupTable tbody tr', {
            'delay': 300,
            'loader': 'span.loading'
        });
        
        {% if edit_mode %}
        $('#save_thumb').click(function() {
            var x1 = $('#x1').val();
            var y1 = $('#y1').val();
            var x2 = $('#x2').val();
            var y2 = $('#y2').val();
            var w = $('#w').val();
            var h = $('#h').val();
            if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
                alert("You must make a selection first");
                return false;
            }else{
                return true;
            }
        });
        {% endif %}
    }); 

    </script>
    
    
    <script>
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function() {
            $( "#password_change_dialog" ).dialog({
                autoOpen: false,
                draggable: false,
                resizable: false,
                closeOnEscape: true,
                modal: false,
                dialogClass: 'reddit',
                buttons: {
                    "OK": function() {
                        // simply submit the form (AJAX handling set-up above)
                        $("#change_password_form").submit();
                    },
                    "Cancel": function() {
                        $( this ).dialog( "close" );
                    }
                },
                position: { 
                    my: 'left center',
                    at: 'right center',
                    of: $('#change_password'),
                    collision: "flip",
                    offset: "10 0"
                }
            });
            
            $( "#change_password" ).click(function() {
                // clear fields
                var $pw_form = $("#change_password_form");
                $("div.error", $pw_form).text("");
                $("input[name='password']", $pw_form).val("");
                $("input[name='confirmation']", $pw_form).val("");
                $("input[name='old_password']", $pw_form).val("");
                // show dialog
                $( "#password_change_dialog" ).dialog( "open" );
                return false;
            });
            $("#password_cancel").click(function() {
                $( "#password_change_dialog" ).dialog( "close" );
                return false;
            });
            
            $("#password_change_message").hide();
            $("#change_password_form").ajaxForm({
                beforeSubmit: function(data) {
                    // check that both new passwords match, fields aren't empty etc.
                    var $pw_form = $("#change_password_form");
                    var new_pw = $("input[name='password']", $pw_form).val();
                    var conf_pw = $("input[name='confirmation']", $pw_form).val();
                    var old_pw = $("input[name='old_password']", $pw_form).val();
                    if ($.trim(new_pw).length==0 || $.trim(conf_pw).length==0 || $.trim(old_pw).length==0) {
                        $("div.error", $pw_form).text("All fields must be filled in.");
                        return false;
                    }
                    if (new_pw != conf_pw) {
                        $("div.error", $pw_form).text("New passwords don't match.");
                        return false;
                    }
                    if (new_pw == old_pw) {
                        $("div.error", $pw_form).text("New password is the same as Old password");
                        return false;
                    }
                    if ($.trim(new_pw).length<3 || $.trim(conf_pw).length<3 || $.trim(old_pw).length==0) {
                        $("div.error", $pw_form).text("Passwords should be at least 3 characters long.");
                        return false;
                    }
                    $( "#password_change_dialog" ).dialog( "close" );
                },
                success: function(html) {
                    $("#password_change_message").html(html).show();
                }
            });

        });
    </script>
    
    <script type="text/javascript">

        $(function() {

            var FREE_SPACE = {{ freeSpace }};

            $(".totalUsage").text('User');

            {% include 'webadmin/includes/drivespaceStats.js' %}

            var drivespace_loaded = false;
            $( "#admin" ).tabs({
                activate: function(event, ui) {
                    if ( $(ui.newTab).find('a').attr('title') == "Drivespace" ){
                        
                        if (!drivespace_loaded) {
                            drivespace_loaded = true;
                            // on load, we show user's data in groups
                            var url = "{% url 'waloaddrivespace_user' experimenter.id %}";
                            plotJson(url);
                        }
                    }
                }
            });

            $(".usageByGroup").click(function() {
              $(".usageBy").removeClass('selected');
              $(this).addClass('selected');
              var gid = $(this).attr("data-groupid");
              var url = "{% url 'waindex' %}" + "drivespace_json/group/" + gid +"/";
              // $("#filterBy").text("Group: " + i.label).show().addClass('selected');
              plotJson(url, {
                  success: function(){
                      $(".totalUsage").text('Group');
                  }
              });
            });
            $("#myUsage").click(function() {
              $(".usageBy").removeClass('selected');
              $(this).addClass('selected');
              var url = "{% url 'waloaddrivespace_user' experimenter.id %}";
              plotJson(url, {
                  success: function(){
                      $(".totalUsage").text('My');
                  }
              });
            });

        });
        
    </script>
    
{% endblock %}




{% block center_details %}
   
<div id="admin">
    
    <ul id="settings_tabs">
        <li id="personal_settings_tab"><a href="#personal_settings" title="User Settings">User</a></li>

        {% if ownedGroups %}<li id="group_settings_tab"><a href="#groups_settings" title="Edit Groups that I own">My Groups</a></li>{% endif %}

        <li id="drivespace_settings_tab"><a href="#drivespace_settings" title="Drivespace">Statistics</a></li>
    </ul>
     
     <!-- Personal Settings -->
    <div id="personal_settings" class="settings_content">


       <form class="standard_form settings_form" action="{% url 'wamyaccount' "save" %}" method="POST">{% csrf_token %}

           <p>{% trans "Fields marked in red are mandatory." %}</p>
           <br/>
           
           <div id="avatar">
               <img src="{% url 'wamyphoto' %}" class="imgzoom"/>                 
               <a class="btn btn_text silver" href="{% url 'wamanageavatar' ome.eventContext.userId %}">
                   <span>Change</span>
               </a> 

               {% if myaccount.hasAvatar %} 
               <a class="btn btn_text silver" href="{% url 'wamanageavatar' ome.eventContext.userId "deletephoto" %}">
                   <span>Delete</span>
               </a>
               {% endif %}
            </div>



           <div id="personal_details">

               {% for field in form %}
                   {% if field.errors %}<div style="clear:both">{{ field.errors }}</div>{% endif %}
                   {% if field.field.required %}<span class="required">{{ field.label_tag }}</span>{% else %}{{ field.label_tag }}{% endif %}
                   {{ field }}
                   {{ field.help_text|safe }}
               {% endfor %}

               {% if ldapAuth %}
               <div id="password"><label>LDAP: </label>{{ ldapAuth }}</div>
               {% else %}

               <div id="password">

                   <div id="password_change">
                       <label>Password:</label>
                       <a class="btn btn_text silver" id="change_password">
                           <span>Change  Password</span>
                       </a>
                       <span id="password_change_message"></span>
                   </div>

               </div>
               {% endif %}


               <input type="submit" value="{% trans 'Save' %}" />
             </div>

       </form>


           <!-- hidden dialog for password change -->
           <div id="password_change_dialog" title="Change Password">

               <form id="change_password_form" action="{% url 'wamanagechangepasswordid' ome.eventContext.userId %}" method="POST">{% csrf_token %}

                   <table>
                       <tbody>
                           {% for field in password_form %}
                           <tr>
                               <td class="form">{{ field.label_tag }}</td>
                               <td class="input">{{ field }}</td>
                               <td>{{ field.help_text|safe }}</td>
                           </tr>
                           {% endfor %}

                           <tr><td colspan="3">
                               <div class="error"></div>
                           </td></tr>
                       </tbody>
                   </table>
               </form>
           </div>
        

    </div>
    

    {% if ownedGroups %}
    <div id="groups_settings" class="settings_content">
        
        <h1>Groups I Own</h1>
        
        <div class="one_column_header">
            <form class="search filtersearch" id="filtersearch" action="#">
                <input type="text" id="id_search" value="">
                <input type="submit" value="Go" />
                <span class="loading">
                    <img class="loader" alt="Loading" src="{% static "webgateway/img/spinner.gif" %}">
                </span>
            </form>
            
        </div>
  
        <table id="dataTable" class="tablesorter tablesorter_basic"> 
            <thead> 
                <tr> 
                    <th>{% trans "Name" %}</th> 
                    <th>{% trans "Permissions" %}</th> 
                    <th>{% trans "Description" %}</th>
                    <th></th>
                </tr> 
            </thead> 
            <tbody>
            {% for group in ownedGroups %}
                <tr>
                    <td><strong>{{ group.name }}</strong></td>
                    <td>{{ group.getPermissions }} ({{ group.details.permissions }})</td>
                    <td>{{ group.description|default:"-"|truncatewords:"5" }}</td>
                    <td class="table_settings">
                        <a href="{% url 'wamanagegroupownerid' "edit" group.id %}" alt="Edit Group" title="Edit Group" class="btn silver">
                            <span>Edit</span>
                        </a>
                    </td>
                </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>
    {% endif %}
    
    
    <div id="drivespace_settings" class="settings_content" style="position:relative">

        {% if ownedGroups %}
            <h1>
                <div class='hlabel'>Personal Usage:</div>
                <div class="tag">
                  <a id="myUsage" class="usageBy tag_inner selected" href="#">{{ ome.user.getFullName }}</a>
                </div>
            </h1>
            <div style="clear:both"></div>
            <h1>
              <div class='hlabel'>Group Usage (where owned):</div>
              {% for group in ownedGroups %}
                <div class="tag">
                  <a class="usageByGroup tag_inner usageBy" href="#" data-groupid="{{ group.id }}">{{ group.name }}</a>
                </div>
              {% endfor %}
            </h1>
            <div style="clear:both"></div>
            <hr>
        {% endif %}

        {% include 'webadmin/includes/drivespaceStats.html' %}
    </div>

</div>
{% endblock %}
