<!DOCTYPE html>
<html class="no-js"> 
    <head>
    {%load staticfiles%}

    <link rel="apple-touch-icon" sizes="57x57"         href="{% static 'rolodex/images/favicon/apple-icon-57x57.png'%}">
    <link rel="apple-touch-icon" sizes="60x60"         href="{% static 'rolodex/images/favicon/apple-icon-60x60.png'%}">
    <link rel="apple-touch-icon" sizes="72x72"         href="{% static 'rolodex/images/favicon/apple-icon-72x72.png'%}">
    <link rel="apple-touch-icon" sizes="76x76"         href="{% static 'rolodex/images/favicon/apple-icon-76x76.png'%}">
    <link rel="apple-touch-icon" sizes="114x114"       href="{% static 'rolodex/images/favicon/apple-icon-114x114.png'%}">
    <link rel="apple-touch-icon" sizes="120x120"       href="{% static 'rolodex/images/favicon/apple-icon-120x120.png'%}">
    <link rel="apple-touch-icon" sizes="144x144"       href="{% static 'rolodex/images/favicon/apple-icon-144x144.png'%}">
    <link rel="apple-touch-icon" sizes="152x152"       href="{% static 'rolodex/images/favicon/apple-icon-152x152.png'%}">
    <link rel="apple-touch-icon" sizes="180x180"       href="{% static 'rolodex/images/favicon/apple-icon-180x180.png'%}">
    <link rel="icon" type="image/png" sizes="192x192"  href="{% static 'rolodex/images/favicon/android-icon-192x192.png'%}">
    <link rel="icon" type="image/png" sizes="32x32"    href="{% static 'rolodex/images/favicon/favicon-32x32.png'%}">
    <link rel="icon" type="image/png" sizes="96x96"    href="{% static 'rolodex/images/favicon/favicon-96x96.png'%}">
    <link rel="icon" type="image/png" sizes="16x16"    href="{% static 'rolodex/images/favicon/favicon-16x16.png'%}">
    <link rel="manifest" href="{% static 'rolodex/images/favicon/manifest.json'%}">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">



    <script src="{% static 'rolodex/js/jquery-1.11.1.min.js'%}"></script>
    <script src="{% static 'rolodex/js/jquery-ui.min.js' %}"></script>
    <script src="{%static 'rolodex/js/jquery.formset.min.js'%}"></script>
    <script src="{% static 'rolodex/js/jquery.sticky.js'%}"></script>
    <script src="{%static 'rolodex/js/jQuery.succinct.min.js'%}"></script>
    <script src="{% static 'rolodex/js/bootstrap.min.js' %}"></script>

    <link rel="stylesheet" href="{% static 'rolodex/css/toggle.css'%}">
    <link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/base.css'%}"\>
    <link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/bootstrap.css'%}"\>
    <link rel="stylesheet" href="{% static 'rolodex/css/jquery-ui.min.css'%}" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   
    
    {%block head%}
    {%endblock%}
    <script src="{% static 'rolodex/js/selectize.min.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/selectize.css'%}">

    <title>Rolodex</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>
{%block topnav%}
<div id="stickyNav">
	<img src="{%static 'rolodex/images/card.png'%}">
	<a href="{% url 'rolodex_home' %}">Rolodex</a>
    <a id="searchNav"><i class="fa fa-search"></i> <span>Search</span></a>
</div>
{%endblock%}

<div class="body">
    {% block content %}{%endblock%}
</div>

<script>
  $(document).ready(function(){
    $("#stickyNav").sticky({topSpacing:0});
    $('.breadcrumb li a').succinct({size: 12});
    $("#searchNav").click(function(){
        $("#search-modal").modal('show');
    });
        
  });

</script>

<div id="search-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" >Rolodex</h4>
    </div>
    <div class="modal-body">
        <div class="switch-toggle switch-candy">
          <input id="search-people" class="rebuild" name="search-ents" type="radio" checked>
          <label for="search-people" onclick="">People</label>

          <input id="search-orgs" class="rebuild" name="search-ents" type="radio">
          <label for="search-orgs" onclick="">Orgs</label>

          <a></a>
        </div>


        <div id="modal-peopleDiv" class="modal-search">
            <select id="modal-peepSelect">
                <option value=""></option>
            {%for org in modal_orgs%}
            <optgroup label="{{org.orgName}}">
                {%for peep in modal_peeps%}
                {%if peep.orgID == org.pk%}
                    <option value="{{peep.pk}}" org="{{peep.orgName}}" data-data='{"org":"{{peep.orgName}}"}'>{{peep.lastName}}, {{peep.firstName}}{%if peep.role%} ({{peep.role}}){%endif%}</option>
                {%endif%}
                {%endfor%}    
            </optgroup>
            {%endfor%}
            <optgroup label="N/A">
                {%for peep in modal_peeps%}
                {%if peep.orgName == 'N/A'%}
                    <option value="{{peep.pk}}" org="{{peep.orgName}}" data-data='{"org":"{{peep.orgName}}"}'>{{peep.lastName}}, {{peep.firstName}}{%if peep.role%} ({{peep.role}}){%endif%}</option>
                {%endif%}
                {%endfor%}
            </optgroup>
            </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 id="modal-orgsDiv" class="modal-search" style="display:none;">
            <select id="modal-orgSelect">
                 <option value=""></option>
            {%for org in modal_orgs%}
                <option value="{{org.pk}}">{{org.orgName}}</option>
            {%endfor%}
            </select>
            <div class="buttonDiv">
            <a class="goLink" href=""><i class="fa fa-angle-double-right"></i> <i class="fa fa-university"></i></a>
            </div>

        </div>




    </div>
    </div>
  </div>
</div>

    <script type="text/javascript">
        var modalOrgDict = {},modalPeepDict={};
        {%spaceless%}
        {%for org in modal_orgs%}modalOrgDict['{{org.pk}}']="{% url 'rolodex_org' org.slug%}";{%endfor%}
        {%for peep in modal_peeps%}modalPeepDict['{{peep.pk}}']="{%url 'rolodex_person' peep.slug%}";{%endfor%}
        {%endspaceless%}

        var $modalPeepSelect = $('#modal-peepSelect').selectize({
            placeholder: 'Search people...',
            maxOptions:10,
            optgroupLabelField:'org',
            optgroupValueField:'org',
            selectOnTab:true,
            searchField:['org','text'],
            onChange: function(value){
                var option =modalPeepDict[$("#modal-peepSelect").val()]; 
                $("#modal-peopleDiv .goLink").attr("href",option);
            },
        });

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

        $("input[name='search-ents']").change(function(){
            if($("#search-modal #search-people").is(":checked")){
                $("#modal-peopleDiv").show();
                $("#modal-orgsDiv").hide();
            }else{
                $("#modal-peopleDiv").hide();
                $("#modal-orgsDiv").show();
            }
        })

    </script>

    </body>
</html>