{% extends "index.htm" %}
{% block headtags %}
  <meta http-equiv="refresh" content="30" />
{% endblock %}
{% block Headline %}
  {{ ServerObject.rootName }}
{% endblock %}
{% block LeftColumn %}
  {% include "mumble/content.htm" %}
{% endblock %}
{% block Content %}
  {% if user.is_authenticated %}
    <div id="mumble_registration">
      <h2>Server registration</h2>
      <form action="" method="post">
        {% if Registered %}
          You are registered on this server.<br />
        {% else %}
          You do not have an account on this server.<br />
        {% endif %}
        <table>
          {{ RegForm }}
        </table>
        <input type="hidden" name="mode" value="reg" />
        <input type="submit" />
      </form>
    </div>
  {% else %}
    <p>You need to be <a href="/accounts/login">logged in</a> to be able to register an account.</p>
    <noscript>
      <p>
        This area is used to display additional information for each channel and player, but requires JavaScript to be
        enabled in order to work correctly.
      </p>
    </noscript>
  {% endif %}
  
  {% if CurrentUserIsAdmin %}
    <div id="mumble_admin">
      <h2>Server administration</h2>
      <form action="" method="post">
        <table>
          {{ AdminForm }}
        </table>
        <input type="hidden" name="mode" value="admin" />
        <input type="submit" />
      </form>
    </div>
    <noscript>
      By the way, if you had enabled JavaScript, you could see a nifty Tab bar here :)
    </noscript>
  {% endif %}
  
  {% for item in ChannelTable %}
    {% if item.1.is_player %}
    <div id="mumble_{{ item.1.id }}" class="x-hide-display">
      Player {{ item.1.name }}
      Online since {{item.1.onlinesince|time:"H:i"}}<br />
      <a href="/accounts/profiles/{{item.1.mumbleuser.owner.id}}">{{item.1.mumbleuser.owner}}</a>
    </div>
    {% else %}
    <div id="mumble_{{ item.1.id }}" class="x-hide-display">
      Channel {{ item.1.name }}<br />
      <a href="mumble://{% if mumbleAccount %}{{ mumbleAccount.name }}@{% endif %}{{ DBaseObject.addr }}/{% for chan in item.2 %}{{ chan|urlencode }}/{% endfor %}{{ item.1.name|urlencode }}" class="dingen">Connect</a>
    </div>
    {% endif %}
  {% endfor %}
{% endblock %}

{% block HeadTag %}
  {% if CurrentUserIsAdmin %}
    <script type="text/javascript">
	Ext.onReady( function(){
		Ext.get( 'mumble_registration' ).addClass( 'x-hide-display' );
		Ext.get( 'mumble_admin' ).addClass( 'x-hide-display' );
		
		var cardpanel = new Ext.Panel({
			renderTo:   'col3_content',
			layout:     'card',
			id:         'mumble_container',
			height:     400,
			activeItem: 0,
			border:     false,
			items:      [ {
				id:        'mumble_tabpanel',
				xtype:     'tabpanel',
				defaults:  { autoheight: true },
				activeTab: {{ DisplayTab }},
				items: [
					{ contentEl: 'mumble_registration', title: 'Registration'   },
					{ contentEl: 'mumble_admin',        title: 'Administration' },
					]
				},
				{% for item in ChannelTable %}
					{ contentEl: 'mumble_{{ item.1.id }}', id: 'carditem_{{ item.1.id }}' },
				{% endfor %}
				],
			});
		
		Ext.get( 'link_server' ).on( 'click', function( event, target ){
			cardpanel.layout.setActiveItem( 'mumble_tabpanel' );
			event.preventDefault();
			});
		{% for item in ChannelTable %}
			Ext.get( 'link_{{ item.1.id }}' ).on( 'click', function( event, target ){
				cardpanel.layout.setActiveItem( 'carditem_{{ item.1.id }}' );
				event.preventDefault();
				});
		{% endfor %}
		} );
    </script>
  {% endif %}
{% endblock %}