{{ header }}
<div class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}</h1>
<div class="clearfix">
{% if show.earnings %}
<div id="legend-div">
<h3><u>{{ text_legend }}</u></h3>
<strong>{{ text_abbr_te }}</strong> - {{ text_te }}<br />
<strong>{{ text_abbr_elm }}</strong> - {{ text_elm }}<br />
</div>
{% endif %}
<ul class="tree">
	<li>(<a href="javascript:;" rel="{{ affiliate_id }}"{% if top_count > 0 %} class="load_subs" title="{{ text_expand }}"{% endif %}>{{ top_count }}</a>)  <strong>{{ text_self }}</strong><img src="{{ image_loading }}" class="loading" style="display:none;" /></li>
</ul>

</div>
      <div class="buttons">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
      </div>

  {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>  
<script type="text/javascript"><!--
$(document).ready(function() {
	$(document).on('click', '.load_subs', function() {
		//$(this).attr('title', ($(this).attr('title') == '{{ text_expand }}' ? '{{ text_collapse }}' : '{{ text_expand }}'));
		var _p = $(this).parent();
		var _this = $(this);
		if($(_p).find('ul').length < 1) {
			$(_p).find('.loading').show();
			$.ajax({
				url: document.location.href.replace('mta/downline', 'mta/downline/l')+(document.location.href.indexOf('?') == -1 ? '?' : '&')+'affiliate_id='+$(_this).attr('rel'),
				dataType: 'json',
				success: function(_r) {
					$(_p).append('<ul></ul>');
					for(var i = 0; i < _r.length; i++) {
						var _li = '<li>(';
						if(_r[i].c > 0) _li += '<a href="javascript:;" class="load_subs" rel="'+_r[i].affiliate_id+'">';
						_li += _r[i].c;
						if(_r[i].c > 0) _li += '</a>'
						_li += ') <span class="aff_name">'+_r[i].name+'</span> ';
						
						{% if show.email %}
						_li += '<a href="mailto:'+_r[i].email+'" class="mailto-link">'+_r[i].email+'</a> ';
						{% endif %}						
						{% if show.phone %}
						_li += ' '+_r[i].telephone+' ';
						{% endif %}						
						_li += ' <img src="{{ image_loading }}" class="loading" style="display:none;" />';
						
						{% if show.earnings %}
						_li += '<span class="help">';
						_li += '{{ text_abbr_te }}: ' + _r[i].e_te + ' / ' + '{{ text_abbr_elm }}: ' + _r[i].e_elm;
						_li += '</span>';
						{% endif %}
						_li += ' </li>';
						$(_p).find('ul').append(_li);
					}
					$(_p).find('.loading').hide();
				}
				});
		} else {
			$($(_p).find('ul')[0]).toggle();
		}
	});
	if($('.load_subs').length > 0) $('.load_subs').trigger('click');
}
);

//--></script> 
{{ footer }}
