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


<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/home.css'%}">

{%endblock%}

{%block content%}

<style type="text/css">
    .bolder{
        font-weight: bold;
    }
</style>

<div id="midrail">

<h1>Rolodex</h1>
<div class="outside freetext">
    <p>Rolodex is a directory of people and the organizations they belong to. It's also a space where you can model relationships.
</div>

<div id="selectors">



    <div id="addPerson" class="clickable"><i class="fa fa-plus-square"></i> Add a Person</div>
        <div id="orgDiv2" class="searchbox">
         <div class="instruct">First choose the primary organization the person belongs to.</div>
        <select id="orgSelect2">
             <option value=""></option>
        {%for org in orgs%}
            <option value="{{org.pk}}">{{org.orgName}}</option>
        {%endfor%}
        </select>
        <div class="buttonDiv">
        <a class="goLink" href=""><i class="fa fa-user-plus"></i></a>
        <a class="addLink" href="{%url 'rolodex_new_org'%}">Not listed? Add a new Org</a> <br> <a class="addLink" href="{%url 'rolodex_new_person_no_org'%}">Or add org-less Person</a>
        </div>
        </div>

    <a class="noUnderline"href="{%url 'rolodex_new_org'%}"><div id="addPerson" class="clickable"><i class="fa fa-plus-square"></i> Add an Org</div></a> 

</div>


</div>

<div class="creditText">Rolodex was developed at</div>
<img class="dmnLogo" src="{%static 'rolodex/images/dmnlogo.jpg'%}">

<script>
var NewOrgDict = {};
{%spaceless%}
{%for org in orgs%}NewOrgDict['{{org.pk}}']="{% url 'rolodex_new_person' org.slug%}";{%endfor%}
{%endspaceless%}


var $orgSelect2 = $('#orgSelect2').selectize({
    placeholder: 'Search organizations...',
    maxOptions:10,
    selectOnTab:true,
    onChange: function(value){
        var option =NewOrgDict[$("#orgSelect2").val()]; 
        $("#orgDiv2 .goLink").attr("href",option);
    },
});



var orgSelect2 = $orgSelect2[0].selectize;




$(".searchbox").hide();
$(document).ready(function(){

    $("#addPerson").click(function(){
        $(".searchbox").hide("slow");
        $("#orgDiv2").slideToggle("slow");
    });
    $("#orgSelect2").change(function(){});
});

</script>

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