{% extends "base.html" %}

{% load humanize %}
{% load naturaltimediff %}
{% block content %}

<div class="character_info">
	<h1>{{ character.name }}</h1>

	<div class="character_portrait">
		<img src="http://image.eveonline.com/Character/{{ character.id }}_256.jpg" />
	</div>
	
	<div class="character_corporation">
		<span><a href="http://evemaps.dotlan.net/corp/{{ character.corporation.name }}">{{ character.corporation.ticker }}</a></span>
		<img src="http://www.evecorplogo.net/logo.php?id={{ character.corporation.id }}" />
	</div>
	
        {% if character.corporation.alliance %}
	<div class="character_alliance">
		<span><a href="http://evemaps.dotlan.net/alliance/{{ character.corporation.alliance.name }}">{{ character.corporation.alliance.ticker }}</a></span>
		<img src="http://image.eveonline.com/Alliance/{{ character.corporation.alliance.id }}_64.png" />
	</div>
        {% endif %}

	<div class="character_attributes">
		<h2>Attributes</h2>
		
		<ul>
			<li><span class="stat">Race:</span> <span class="value">{{ character.get_race_display }}</span></li>
			<li><span class="stat">Gender:</span> <span class="value">{{ character.get_gender_display }}</span></li>
			<li><span class="stat">Corporation:</span> <a href="http://evemaps.dotlan.net/corp/{{ character.corporation.name }}">{{ character.corporation.name }}</a></span></li>
			<li><span class="stat">Joined Corporation:</span> <span class="value">{{ character.corporation_date|date:"Y/m/d H:i:s" }} ({{ character.corporation_date|naturaltimediff }})</span></li>
			<li><span class="stat">Alliance:</span> <span class="value"><a href="http://evemaps.dotlan.net/alliance/{{ character.corporation.alliance.name }}">{{ character.corporation.alliance.name }}</a></span></li>
			<li><span class="stat">Security Status:</span> {{ character.security_status }}</span></li>
			<li><span class="stat">Director:</span> <span class="value">{{ character.director }}</span></li>
		</ul>
	</div>

	<div class="character_stats">
		<h2>Stats</h2>
		
		<table>
			<tr><th>Stat</th><th>Value</th></tr>
			<tr><td class="stat">Intelligence</td><td> {{ character.attrib_intelligence }}</td></tr>
			<tr><td class="stat">Memory</td><td>{{ character.attrib_memory }}</td></tr>
			<tr><td class="stat">Charisma</td><td>{{ character.attrib_charisma }}</td></tr>
			<tr><td class="stat">Perception</td><td>{{ character.attrib_perception }}</td></tr>
			<tr><td class="stat">Willpower</td><td>{{ character.attrib_willpower }}</td></tr>
		</table>
	</div>

	<div class="character_skills">
		<h2>Skills</h2>
		
		<div class="skill_controls">
			<a href=#" id="openAll">Open All</a>
			<a href=#" id="collapseAll">Collapse All</a>
		</div>
		<table>

                        {% regroup skills by skill.group as skill_group %}
                        {% for group in skill_group %}
			<tr class="skill_heading"><th colspan=3>{{ group.grouper }}</th</tr>
			{% for skill in group.list %}
			<tr style="display:none;"><td>{{ skill.skill.name }} </td><td><img src="/static/img/skills/level{{ skill.level }}.gif" alt="Level {{ skill.level }}" /></td><td>{{ skill.skillpoints|intcomma }} SP</td></tr>
			{% endfor %}
			{% endfor %}
			<tr><th colspan=2>Total SP</th><th>{{ character.total_sp|intcomma }} SP</th></tr>
		</table>
	</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$(".skill_heading").bind("click", function(){
			$this = $(this);
			$this.nextUntil(".skill_heading").toggle('fast');
			
			if($this.hasClass("toggle_off")){
				$this.removeClass("toggle_off").removeClass("toggle_on");
			}else{
				$this.removeClass("toggle_on").removeClass("toggle_off");
			}
		});
		
		$("#openAll").bind("click", function(e){
			e.preventDefault();
			$(".character_skills tr").css({ display: "table-row" });
		});
		
		$("#collapseAll").bind("click", function(e){
			e.preventDefault();
			$(".character_skills tr:not(.skill_heading)").css({ display: "none" });
		});
	});
</script>

{% endblock %}