{%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_org_map' node.slug%}">Full page graph</a>
</div>
{%endif%}

<h1>{{node.orgName}}</h1>

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

<div class="change">
<a href="{%url 'rolodex_edit_org' 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%}

<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%}
  {%if contact.role%}
  <div class="contact_role">{{contact.role}}</div>
  {%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}}</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:"o",
            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}}{%if r.relation.role%}{%if r.type%} - {%endif%}{{r.relation.role.role}}{%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:"o",
            to_ent:"{{r.relation.pk}}",
            to_type:"p",
            csrfmiddlewaretoken: '{{ csrf_token }}',
          }
      );
  })
</script>
{% endspaceless %}
{%endfor%}


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

<div id="searchPosition" class="clickable"><i class="fa fa-search"></i> Employees</div>
<div id="peepPosition" class="bioBank">
          <div id="peepDiv" class="searchbox">
        <select id="peepSelect">
            <option value=""></option>
            {%for peep in node.employees%}
             <option value="{{peep.id}}" org="{{peep.orgName}}" data-data='{"org":"{{peep.orgName}}"}'>{{peep.lastName}}, {{peep.firstName}}{%if peep.role%} ({{peep.role|capfirst}}){%endif%}</option>
            {%endfor%}    
        </select>
        <div class="buttonDiv">
        <a class="goLink" href=""><i class="fa fa-angle-double-right"></i> <i class="fa fa-user"></i></a>
        </div>
        </div>
        <div class="change"><a href="{%url 'rolodex_new_person' node.slug %}"><i class="fa fa-user-plus"></i> Add employee</a></div>
</div>



<div class="change delete">
<a href="{%url 'rolodex_delete_org' node.slug%}"><i class="fa fa-times"></i> Delete {{node.firstName}}?</a>
</div>



</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);
}

var PeepDict={};
{%for peep in node.employees%}
PeepDict['{{peep.id}}']="{%url 'rolodex_person' peep.slug%}";
{%endfor%}

var $peepSelect = $('#peepSelect').selectize({
    placeholder: 'Search people...',
    maxOptions:10,
    optgroupLabelField:'org',
    selectOnTab:true,
    searchField:['org','text'],
    onChange: function(value){
        var option =PeepDict[$("#peepSelect").find(':selected').val()]; 
        $("#peepDiv .goLink").attr("href",option);
    },
});

var peepSelect = $peepSelect[0].selectize;


</script>


<script>
var replaceP = '{% url "rolodex_person" "foobarbaz" %}',
	replaceO = '{% url "rolodex_org" "foobarbaz" %}',
	nodeID="{{node.orgName}}",
	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_org_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.orgName}}</a></li>
</ul>
</div>
{%endblock%}