{%extends "rolodex/base.html" %}
{%load staticfiles%}
{%block head%}

<script src="{% static 'rolodex/js/selectize.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/selectize.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/entity.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/nodeMap.css'%}">
<script src="{% static 'rolodex/js/d3.v3.min.js'%}"></script>

{%endblock%}

{%block content%}


<div id="midrail">

{% if node.net_length > 2 %}
<div id="networkCanvas"></div>
<div class="fullMap">
<a href="{%url 'rolodex_person_map' node.slug%}">Full page graph</a>
</div>
{%endif%}

<h1>{{node.firstName}} {{node.lastName}}</h1>
<div class="professional">
  {%if node.role%}
  <span>
  {{node.role|title}}</span><br/>
  {%endif%}
  {%if node.position%}
  {{node.position}}<br/>
  {%endif%}
  {%if node.department%}
  {{node.department|title}} department<br/>
  {%endif%}
</div>

{%if node.notes%}
<div class="entity_notes">
{{node.notes|linebreaks}}
</div>
{%endif%}

<div class="change">
<a href="{%url 'rolodex_edit_person' node.slug%}"><i class="fa fa-pencil"></i> Add/edit basic info</a>
</div>




<div id="contactHead" class="clickable"><i class="fa fa-envelope-o"></i> Contacts</div>
<div id="contactSlide" class="bioBank">

{%for contact in node.contacts%}
{%if contact.role%}
<h6>{{contact.role}}</h6>
{%endif%}
<ul>
  <li>
  {%if contact.type == "email"%}
  <span class="type"><i class="fa fa-envelope-o"></i></span> 
   <a href="mailto:{{contact.contact}}">{{contact.contact}}</a>
  {%elif contact.type == "link" %}
  <span class="type"><i class="fa fa-link"></i></span> 
  <a href="{{contact.contact}}">{{contact.contact}}</a>
  {%elif contact.type == "address" %}
  <span class="type"><i class="fa fa-home"></i></span> {{contact.contact}}
  {%elif contact.type == "phone"%}
  <span class="type"><i class="fa fa-phone"></i></span> {{contact.contact}}
  {%else%}
  {{contact.contact}}
  {%endif%}
  </li>
  {%if contact.notes%}
  <li class="notes">{{contact.notes}}</li>
  {%endif%}
</ul>

{%endfor%}
  <div class="change">
    <a href="{%url 'rolodex_edit_person' node.slug%}"><i class="fa fa-pencil"></i> Add/edit contacts</a>
  </div>
</div>


<div id="relationHead" class="clickable"><i class="fa fa-users"></i> Relationships</div>
<div id="relationSlide" class="bioBank">

<div class="relation_container clearfix">
<div class="relations">

{%for r in node.relations.orgs%}
{% spaceless %}
<div class="rel_O{{r.relation.pk}}">
<span><a href="{%url 'rolodex_org' r.relation.slug%}"><i class="fa fa-university"></i>  {{r.relation.orgName}}</a> <i class="fa fa-times relation_delete" title="Delete relationship?"></i></span> <br/>

<div class="relation_type">{{r.type|capfirst}}</div>
</div>
<script type="text/javascript">
  $(".rel_O{{r.relation.pk}} .relation_delete").click(function(){
      $.post("{%url 'rolodex_delete_relation'%}",
          {
            from_ent:"{{node.pk}}",
            from_type:"p",
            to_ent:"{{r.relation.pk}}",
            to_type:"o",
            csrfmiddlewaretoken: '{{ csrf_token }}',
          },
          function(){$(".rel_O{{r.relation.pk}}").slideUp("slow");} 
      );
  })
</script>
{% endspaceless %}
{%endfor%}

</div>
</div>

<div class="relation_container clearfix">
<div class="relations">

{%for r in node.relations.people%}
{% spaceless %}
<div class="rel_P{{r.relation.pk}}">
<span><a href="{%url 'rolodex_person' r.relation.slug%}"><i class="fa fa-user"></i>  {{r.relation.firstName}} {{r.relation.lastName}}</a> <i class="fa fa-times relation_delete" title="Delete relationship?"></i></span> <br/>

<div class="relation_type">{{r.type|capfirst }}{%if r.relation.role%}{%if r.type%} - {%endif%}{{r.relation.role.role|capfirst }}{%endif%}</div>

</div>
<script type="text/javascript">
  $(".rel_P{{r.relation.pk}} .relation_delete").click(function(){
      $(".rel_P{{r.relation.pk}}").slideUp("slow");
      $.post("{%url 'rolodex_delete_relation'%}",
          {
            from_ent:"{{node.pk}}",
            from_type:"p",
            to_ent:"{{r.relation.pk}}",
            to_type:"p",
            csrfmiddlewaretoken: '{{ csrf_token }}',
          }
      );
  })
</script>
{% endspaceless %}
{%endfor%}

</div>
</div>
  <div class="change">
    <a href="{%url 'rolodex_new_person_relation' node.slug%}"><i class="fa fa-user-plus"></i> Add a relationship</a>
  </div>
</div>



<div class="change delete">
Last edited by: {{node.last_edited_by}}<br>
<a href="{%url 'rolodex_delete_person' node.slug%}"><i class="fa fa-times"></i> Delete {{node.firstName}}?</a>
</div>




<script type="text/javascript">
  $(".bioBank").hide();
  $("#contactHead").click(function(){$("#contactSlide").slideToggle("slow");scrolldown();});
  $("#relationHead").click(function(){$("#relationSlide").slideToggle("slow");scrolldown();});
  $("#searchPosition").click(function(){$("#peepPosition").slideToggle("slow");scrolldown();});



function scrolldown(){
  var y = $(window).scrollTop();  
    $("html, body").animate({ scrollTop: y + 75 }, 600);
}



</script>

<script>
var replaceP = '{% url "rolodex_person" "foobarbaz" %}',
	replaceO = '{% url "rolodex_org" "foobarbaz" %}',
  nodeID="{{node.firstName}} {{node.lastName}}",
  nodePRIME = "{{node.primary}}"
  graphWidth = 500,
  graphHeight = 250;
</script>
<script src="{% static 'rolodex/js/nodeNet.js'%}"></script>
<script type="text/javascript">
  $('#networkCanvas').html("<img class='waitingGIF' src=\"{%static 'rolodex/images/waiting.gif'%}\">");
  $.ajax({
    type:"GET",
    dataType:"json",
    url:"{%url 'rolodex_person_network' node.slug %}",
    success: function(d){
      $('#networkCanvas').html("");
      chartNetwork(d);
    }
  });
</script>



<div class="breadcrumb-container">
<ul class="breadcrumb">
	<li><a href="{% url 'rolodex_home' %}">Home</a></li>
	<li><a>{{node.lastName}}, {{node.firstName}}</a></li>
</ul>
</div>
{%endblock%}