{% extends "index.html" %}
{% load staticfiles %}
{% comment %}
    <!-- kate: space-indent on; indent-width 4; replace-tabs on; -->
{% endcomment %}
{% load mumble_extras %}
{% load i18n %}
{% block body %}
{% endblock %}
{% block PageTitle %}Mumble :: {{ MumbleServer.name }}{% endblock %}
{% block HeadTag %}
    <link rel="stylesheet"    type="text/css"  href="{% static 'mumble/css/tab-scroller-menu.css' %}" />
    <style  type="text/css">
        .x-tab-tabmenu-right {
            background: transparent url({% static 'mumble/img/tab-scroller-menu.gif' %}) no-repeat 0 0;
        }
    </style>
    <script src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/api/api.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/api.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/choicescombo.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/{{ RegForm|lower }}.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/mumbleform.js"></script>
    <script src="{% static 'mumble/js/TabScrollerMenu.js' %}"></script>
    <script src="{% static 'mumble/js/channelviewer.js' %}"></script>
    <script src="{% static 'mumble/js/channelviewerplugins.js' %}"></script>
    <script src="{% static 'mumble/js/rendermumbleserver.js' %}"></script>
    <script src="{% static 'mumble/js/usereditor.js' %}"></script>
    <script src="{% static 'mumble/js/logviewer.js' %}"></script>
    <script src="{% static 'mumble/js/banviewer.js' %}"></script>
    <script src="{% static 'mumble/js/buttoniframewindow.js' %}"></script>
    <script src="{% static 'mumble/js/loginout_buttons.js' %}"></script>
    <script type="text/javascript">
        Ext.onReady( function(){
            Ext.QuickTips.init();
            mainpanel = new Ext.Panel({
                renderTo: document.body,
                height:   600,
                layout:   "border",
                tbar: [ {
                    text: "{% trans "Back to the server list" %}",
                    xtype: "button",
                    handler: function(){
                        location.href = "{% url 'mumble.views.mumbles' %}";
                    }
                } ],
                buttons: [
                    {% if user.is_staff and "rosetta" in INSTALLED_APPS %}
                    {
                        xtype: 'buttonIframeWindow',
                        text:  "{% trans 'Edit Translation' %}",
                        url: '{% url "rosetta-home" %}'
                    },
                    {% endif %}
                    {% if user.is_staff %}
                    {
                        xtype: 'buttonIframeWindow',
                        text:  "{% trans 'Administration' %}",
                        url: '{% url "admin:mumble_mumble_change" MumbleServer.id %}'
                    },
                    {% endif %}
                    {% if user.is_authenticated %}
                        new Ext.ux.ButtonLogout()
                    {% else %}
                        {% if 'registration' in INSTALLED_APPS %}
                        {
                            xtype: 'buttonIframeWindow',
                            text:  "{% trans 'Register' %}",
                            url: '{% url "registration.views.register" %}'
                        },
                        {% endif %}
                        new Ext.ux.ButtonLogin()
                    {% endif %}
                ],
                items: [{
                    xtype: "mumblechannelviewer",
                    region: "west",
                    width: 350,
                    split: true,
                    {% if UsersAboveChannels %}
                        usersAboveChannels: true,
                    {% endif %}
                    enableDD: true,
                    plugins: [
                        new Ext.ux.MumbleUserEditor({
                            serverid: {{MumbleServer.id}},
                            is_admin: {{ IsAdmin|lower }}
                            }),
                        new Ext.ux.MumbleChannelEditor({
                            serverid: {{MumbleServer.id}},
                            is_admin: {{ IsAdmin|lower }}
                            })
                        ],
                    source_url: "{% url 'mumble.views.cvp_json' MumbleServer.id %}",
                    imageurl: '{% static "mumble/img" %}',
                    listeners: {
                        moveUser: function( tree, userdata, chandata ){
                            Mumble.moveUser( {{MumbleServer.id}}, userdata.session, chandata.id );
                        },
                        moveChannel: function( tree, chandata, targetdata ){
                            Mumble.moveChannel( {{MumbleServer.id}}, chandata.id, targetdata.id );
                        }
                    }
                }, {
                    xtype: "tabpanel",
                    region: "center",
                    activeTab: 0,
                    enableTabScroll: true,
                    plugins: [ new Ext.ux.TabScrollerMenu() ],
                    items: [{
                        title: "{% trans "Server info" %}",
                        {% if QRAvailable %}
                            html:  ('<img src="{% url "mumble.views.qrcode" MumbleServer.id %}" ' +
                                    'style="float: right" alt="QR Code for embedded view"/>' +
                                    renderserverinfos( {{ ServerDict|safe }} ))
                        {% else %}
                            html:  renderserverinfos( {{ ServerDict|safe }} )
                        {% endif %}
                    }
                    {% if user.is_authenticated %},
                        {
                            title: "{% trans "Registration" %}",
                            xtype: "{{ RegForm|lower }}",
                            submitButtonText: "{% trans 'Submit' %}",
                            pk: {% if MumbleAccount %}{{ MumbleAccount.id }}{% else %}-1{% endif %},
                            labelWidth: 150,
                            baseParams: {serverid: {{MumbleServer.id}} },
                            {% if not MumbleAccount %}
                                listeners: {
                                    submitSuccess: function( form, action ){
                                        window.location.reload();
                                    }
                                }
                            {% else %}
                                listeners: {
                                    submitSuccess: function( form, action ){
                                        form.savetip = new Ext.ToolTip({
                                            id: 'content-anchor-tip',
                                            target: '{{ RegForm }}_submit',
                                            anchor: 'right',
                                            html: "{% trans "Saved successfully." %}",
                                            width: 150,
                                            autoHide: true,
                                            listeners: {
                                                hide: function( ttip ){
                                                    form.savetip.destroy();
                                                    form.savetip = null;
                                                }
                                            }
                                        });
                                        form.savetip.show();
                                    }
                                }
                            {% endif %}
                        },
                        {% if IsAdmin %}
                            {
                                title: "{% trans "Administration" %}",
                                pk:    {{ MumbleServer.id }},
                                labelWidth: 150,
                                xtype: 'mumbleform',
                                submitButtonText: "{% trans 'Submit' %}",
                                listeners: {
                                    submitSuccess: function( form, action ){
                                        form.savetip = new Ext.ToolTip({
                                            id: 'content-anchor-tip',
                                            target: 'MumbleForm_submit',
                                            anchor: 'right',
                                            html: "{% trans "Saved successfully." %}",
                                            width: 150,
                                            autoHide: true,
                                            listeners: {
                                                hide: function( ttip ){
                                                    form.savetip.destroy();
                                                    form.savetip = null;
                                                }
                                            }
                                        });
                                        form.savetip.show();
                                    }
                                }
                            },
                        {% endif %}
                        {% if MumbleAccount %}
                            {
                                title: "{% trans "User texture" %}",
                                {% if MumbleServer|mmversion_eq:"1.2.2" %}
                                    html: "{% trans 'Sorry, due to a bug in Murmur 1.2.2, displaying and setting the Texture is disabled.' %}"
                                {% else %}
                                    layout: "border",
                                    items: [{
                                        region: "north",
                                        layout: "hbox",
                                        height: 200,
                                        items: [{
                                            flex: 1,
                                            height: 200,
                                            title: "{% trans "Texture" %}",
                                            html: String.format('<img src="{0}" alt="Avatar" id="img_avatar" />',
                                              "{% url 'mumble.views.showTexture' MumbleServer.id MumbleAccount.mumbleid %}")
                                        }, {
                                            flex: 1,
                                            height: 200,
                                            title: "{% trans "Gravatar" %}",
                                            html: String.format('<img src="{0}" alt="grAvatar" />', "{{ MumbleAccount.gravatar }}")
                                        }]
                                    }, {
                                        region: "center",
                                        xtype: "form",
                                        labelWidth: 150,
                                        fileUpload: true,
                                        url: "{% url 'mumble.views.update_avatar' MumbleAccount.id %}",
                                        items: [{
                                            name:       "usegravatar",
                                            fieldLabel: "{% trans "Use Gravatar" %}",
                                            xtype:      "checkbox"
                                        }, {
                                            name:       "texturefile",
                                            fieldLabel: "{% trans "Upload Avatar" %}",
                                            xtype:      "textfield",
                                            inputType:  "file"
                                        }],
                                        buttons: [{
                                            text:   "{% trans 'Submit' %}",
                                            handler: function(){
                                                this.ownerCt.ownerCt.getForm().submit({
                                                    success: function(form, action){
                                                        var now = new Date();
                                                        var img = Ext.fly("img_avatar");
                                                        img.dom.src = String.format("{0}?_dc={1}",
                                                            "{% url 'mumble.views.showTexture' MumbleServer.id MumbleAccount.mumbleid %}",
                                                            now.getTime()
                                                            );
                                                        }
                                                    });
                                            }
                                        }]
                                    }]
                                {% endif %}
                            },
                        {% endif %}
                        {% if IsAdmin %}
                            {
                                xtype: "userEditorPanel",
                                server: {{ MumbleServer.id }}
                            }, {
                                xtype: 'logViewerPanel',
                                server: {{ MumbleServer.id }}
                            }, {
                                xtype: 'banViewerPanel',
                                server: {{ MumbleServer.id }}
                            }
                        {% endif %}
                    {% endif %}
                    ]
                }]
            });
            function updateLayout(){
                viewsize = {
                    width:  Ext.lib.Dom.getViewWidth(),
                    height: Ext.lib.Dom.getViewHeight()
                };
                mainpanel.setHeight( viewsize.height - 20 );
                mainpanel.setWidth( viewsize.width - 40 );
            }
            updateLayout();
            Ext.EventManager.onWindowResize(updateLayout);
        } );
    </script>
    <style type="text/css">
        body {
            padding: 20px 20px 0 20px;
        }
    </style>
{% endblock %}