<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2, 3, 4, 5, 6
  DESCRIPTION: Here is the HTML code that describe the content of the page and
  it's layout. based on the meteorJs kind of way.
-->
<head>
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <title>VoterCloud</title>
  <link rel="icon" type="image/png" href="/vote1.png">
  <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_compiled.js"></script>
</head>
<body>
</body>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2
  DESCRIPTION: The Template for the Layout, look on the documentation for more details.
-->
<template name="layout">
  {{#if setMenu}}
    {{> header}}
  {{/if}}
  <div id="page">
  <div id="pagemask"></div>
  {{> yield}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine, Raul Garay.
  SPRINT: 1, 2
  DESCRIPTION: The Template for the Header and menu, look on the documentation for more details.
-->
<template name="header">
  <div id="toggle-menu2">
    <a href="#" id="toggle-menu"><img id="image" src="/options21.png" width="30" height="30"></a>
    <span id="login-btns">{{> loginButtons}}</span>
    <span id="middle-header">{{view}}</span>
  </div>
  {{> slide}}
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2
  DESCRIPTION: The Template for the Menu, look on the documentation for more details.
-->
<template name="slide">
  <ul id="menu">
    <li class="menuitem">
      <a id="menua" href="/" class="menu-link">#general</a>
    </li>
    <li class="menuitem">
      <a id="menua" href="/localMap" class="menu-link">#localMap</a>
    </li>
    <li class="menuitem"><a id="menua" href="/Search" class="menu-link">Representatives</a></li>
    <li class="menuitem"><a id="menua" href="/Survey" class="menu-link">Polls</a></li>
    <li class="menuitem"><a id="menua" href="/Elections" class="menu-link">Elections</a></li>
    <li class="menuitem"><a id="menua" href="/Petition" class="menu-link">Petitions</a></li>
    <li class="menuitem"><a id="menua" href="/About" class="menu-link">About</a></li>
  </ul>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2, 3, 4, 5
  DESCRIPTION: The Template for the Chat room, look on the documentation for more details.
-->
<template name="Home">
  <div id="check">
    <h1> #General</h1>
    <!--{{> localizeme}}-->
    {{> chat}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2, 3, 4, 5
  DESCRIPTION: The Template for the Chat room, look on the documentation for more details.
-->
<template name="chat">
  <div class="message-history" id="message-history">
    {{#each messagess}}
      <div class="message" >
        <a href="" class="message_profile-pic"></a>
        <a href="" class="message_username">{{user}}</a>
        <span class="message_timestamp">{{timestampToTime date}}</span>
        <span class="message_star"></span>
        <span class="message_content">
          {{msg}}
          {{#if link}}
            <a href="/Survey/{{link}}">#poll</a>
          {{/if}}
          {{#if linkp}}
            <a href="/Petition/{{linkp}}">#petition</a>
          {{/if}}
        </span>
      </div>
    {{/each}}
  </div>
  <div class="footer">
    <form id="sendMsg" name="sendMsg">
      <div class="input-box">
        <div class="row-fluid">
          <div id="wellid">
            <input class="input-box_text" type="text" id="msg" placeholder="Your message...">
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 6
  DESCRIPTION: Hashtag chat(like twitter hashtag) , NOT IN USE !!! NOT IN USE !!! NOT IN USE !!!.
-->
<template name="select">
  <select multiple id="selectChat">
    {{#each polls}}
      <option value="/Survey/{{_id}}">{{question}}</option>
    {{/each}}
    {{#each petitions}}
      <option value="/Petition/{{_id}}">{{subject}}</option>
    {{/each}}
  </select>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine
  SPRINT: 1, 2, 3, 4, 5, 6
  COMPLETE REWRITE/REDESIGN: Raul Garay
  SPRINT: 7
  DESCRIPTION: The Template for the Representative, look on the documentation for more details.
-->
<template name="Search">
  <br>
  <h3 id="hr-text-container"><span id="hr-text">Toggle Search Options</span></h3>
  <div id="search-container" class="container">
    <form id="Search" role="form">
      <div class="row">
        <div class="col-xs-4">
          <input type="text" class="form-control" name="address" placeholder="Please type address" maxlength="30">
        </div>
        <div class="col-xs-4" style="padding-left:0;">
          <button type="submit" class="btn btn-default" style="margin-left:0;">Search</button>
        </div>
        <div class="col-xs-4 text-center">
          <button id="but" class="btn btn-default" name="but" value="GPS">GPS</button>
        </div>
      </div>
    </form>
    <hr style="border-color:orange; width:90%; margin-left: 12px;" />
  </div>
  <div class="container">
    {{#each officials}}
      <a href="#">
        <div id="rep-img-container" class="col-xs-4">
          {{> repImage}}    
        </div>
      </a>
    {{/each}}
  </div>
</template>

<template name="repImage">
  {{#if hasPhoto}}
    <img id="imgSearch" src={{photo}}>
  {{else}}
    {{#if hasface}}
      {{> facebookImage}}
    {{else}}
      {{#if hastwit}}
        {{> twitterImage}}
      {{else}}
        {{> imagesGen}}
      {{/if}}
    {{/if}} 
  {{/if}}
  <div class="official-name-container">
    <p class="official-name">{{officialName}}</p>
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 6
  DESCRIPTION: Rep channel.
-->
<template name="RepChannel">
  <div id="check">
    <div id="divSearchh">
      <ul id="ulSearch">
        <li id="liSearchh" class="repchan" name="repchan">
          <table>
            <tr>
              <td>
                {{#if hasPhoto}}
                  <img id="imgSearchh" src={{photo}} height="150" width="150">
                {{else}}
                  {{#if hasface}}
                    {{> facebookImage}}
                  {{else}}
                    {{#if hastwit}}
                      {{> twitterImage}}
                    {{else}}
                      {{> imagesGen}}
                    {{/if}}
                  {{/if}} 
                {{/if}}
              </td>
              <td id="tabletdImage">
                <h3 id="officialName">
                  {{officialName}} <img src={{partyImg}} width="20" height="20"><br/><span class="officeName">{{officeName}}</span>
                </h3>
                <p id="pSearch">
                Division: {{division}}.<br>
                {{#if hasPhone}} Contact: {{phone}}.<br>{{/if}}
                {{#if hasFacebook}}<a href={{facebook}}><img src="/facebook.png" width="32" hight="32"></a>{{/if}}
                {{#if hasTwitter}}<a href={{twitter}}><img src="/twitter.png" width="32" hight="32"></a>{{/if}}
                {{#if hasYoutube}}<a href={{youtube}}><img src="/youtube.png" width="32" hight="32"></a>{{/if}}
                </p>
              </td>
            </tr>
          </table>
        </li>
      </ul>
    </div>
    <hr id="rephr">
    <div class="message-historyy" id="message-historyy">
      {{#each messagess}}
        <div class="message" >
          <a href="" class="message_profile-pic"></a>
          <a href="" class="message_username">{{user}}</a>
          <span class="message_timestamp">{{timestampToTime date}}</span>
          <span class="message_star"></span>
          <span class="message_content">{{msg}}</span>
        </div>
      {{/each}}
    </div>
    <div class="footer">
      <form id="sendMsg" name="sendMsg">
        <div class="input-box">
          <div class="row-fluid">
            <div id="wellid">
              <input class="input-box_text" type="text" id="msg" placeholder="Your message...">
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2, 3, 4
  DESCRIPTION: The Template for the Representative Image Profile, look on the documentation for more details.
-->
<template name="imagesGen">
  <img id="imgSearch" name="imgSearch" class="imgSearch" src={{images}} height="150" width="150" value="{{images}}">
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2, 3, 4
  DESCRIPTION: The Template for the Representative Facebook Image Profile, look on the documentation for more details.
-->
<template name="facebookImage">
  <img id="imgSearch" name="imgSearch" class="imgSearch" src={{fcimage}} height="150" width="150" value="{{fcimage}}">
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2, 3, 4
  DESCRIPTION: The Template for the Representative Twitter Image Profile, look on the documentation for more details.
-->
<template name="twitterImage">
  <img id="imgSearch" name="imgSearch" class="imgSearch" src={{twimage}} height="150" width="150" value="{{twimage}}">
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine, Raul Garay.
  SPRINT: 1, 2, 3, 4
  DESCRIPTION: The Template for the Elections user story, look on the documentation for more details.
-->
<template name="Elections">
  <br>
  {{#each elections}}
    <div id="election-container">
      <a href="#">
        <div id="election-header">
          <span id="voting">{{name}}</span>
          <img id="elections-arrow" src="/grey_arrow_right.png">
          <br>
          <span id="electionDay">{{electionDay}}</span>
        </div>
      </a>
      <div class="election-info">{{> votes}}</div>
    </div>
  {{/each}}
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine, Raul Garay.
  SPRINT: 1, 2, 3, 4, 6, 7.
  DESCRIPTION: The Template for the Elections user story, look on the documentation for more details.
-->
<template name="votes">
{{#each voting}}
  {{#if isthere}}
    <div id="resource-header">Resources</div>
    <div id="resources">
      <a href={{absenteeVotingInfoUrl}}>Absentee voting</a><br>
      <a href={{electionInfoUrl}}>Info</a><br>
      <a href={{electionRegistrationConfirmationUrl}}>Registration Confirmation</a><br>
      <a href={{electionRegistrationUrl}}>Registration</a><br>
      <a href={{electionRulesUrl}}>Rules</a><br>
      <a href={{votingLocationFinderUrl}}>Locations</a><br>
    </div>
  {{/if}}
{{/each}}
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2
  DESCRIPTION: The Template for the Loading, look on the documentation for more details.
-->
<template name="loading">
  {{> spinner}}
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2
  DESCRIPTION: The Template for the Page not Found (based on Iron Router), look on the documentation for more details.
-->
<template name="notFound">
  <div class="not-found">
    <h2>404</h2>
    <p>Page Not Found !!!</p>
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 1, 2, 3, 4, 5
  DESCRIPTION: The Template for the About Page, look on the documentation for more details.
-->
<template name="About">
  <h1>VoterCloud</h1>
  <br>
  <br>
  <h3> Eldar Feldbeine - The Main Programmer and Developer(Front and Back-end) , Client, Server, Html, Css and document.</h3>
  <h3> Raul Garay - Front-end proggrammer, Html, Css and document.</h3>
  <h3> Mentor and product owner: Gus Monge.</h3>
  <br>
  <h5> <a href="https://github.com/FIU-SCIS-Senior-Projects/VoterCloud">https://github.com/FIU-SCIS-Senior-Projects/VoterCloud</a></h5>
  <h5> FIU-Senior Project</h5>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 5
  DESCRIPTION: The Template for the Survey/Poll user story, look on the documentation for more details.
-->
<template name="Survey">
  <br>
  {{#if admin}}
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          {{#if askPoll}}
            <form name="Poll" id="Poll"> 
              <div class="form-group" name="question-group" id="question-group">
                <label>Question</label>
                <input type="text" name="Question" class="form-control" placeholder={{PollMesg1}}>
              </div>
              <div class="form-group">
                <label>Answer #1</label>
                <input type="text" name="Answer1" class="form-control" placeholder={{PollMesg2}}>
              </div>
              <div class="form-group">
                <label>Answer #2</label>
                <input type="text" name="Answer2" class="form-control" placeholder={{PollMesg3}}>
              </div>
              <div class="form-group">
                <label>Answer #3</label>
                <input type="text" name="Answer3" class="form-control" placeholder="(optional) Answer #3">
              </div>
              {{#if plus}}
                <div class="form-group">
                  <label>Answer #4</label>
                  <input type="text" name="Answer4" class="form-control" placeholder="(optional) Answer #4">
                </div>
                <div class="form-group">
                  <label>Answer #5</label>
                  <input type="text" name="Answer5" class="form-control" placeholder="(optional) Answer #5">
                </div>
                <div class="form-group">
                  <label>Answer #6</label>
                  <input type="text" name="Answer6" class="form-control" placeholder="(optional) Answer #6">
                </div>
              {{else}}
                <div class="form-group">
                  <label>For more options</label>
                  <a href="#" name="plus" id="plus"><img src="/add121.png" height="24" width="24" id="plus" name="plus"></a>
                </div>
              {{/if}}
              <input type="submit" class="btn btn-lg btn-primary btn-block" value="Create Poll">
            </form>
          {{else}}
            <input type="text" class="btn btn-lg btn-primary btn-block" value="Make Poll" id="askPoll" name="askPoll">
          {{/if}}
        </div>
      </div>
    </div>
  {{/if}}
  <div class="polls">
      {{#each polls}}
          {{> poll}}
      {{/each}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 5
  DESCRIPTION: The Template for the Survey/Poll user story, look on the documentation for more details.
-->
<template name="poll">
  <div class="poll well well-lg" data-id="{{_id}}">
    <h3>{{question}}</h3> <a href="{{pathFor route='pollPage'}}">Link</a>
      {{#each choices}}
        <a href="#" class="vote btn btn-primary btn-block" data-id="{{index}}" id="choice">
            <span class="votes pull-right" id="vote" name="vote">{{votes}}</span>
            <span class="text">{{text}}</span>
        </a>
      {{/each}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 5
  DESCRIPTION: The Template for the Survey/Poll user story, This is the Link of Iron Router, look on the documentation for more details.
-->
<template name="pollPage">
  <br>
  <div class="poll well well-lg" data-id="{{_id}}">
    <h3>{{question}}</h3>
      {{#each choices}}
        <a href="#" class="vote btn btn-primary btn-block" data-id="{{index}}" id="choice">
            <span class="votes pull-right" id="vote" name="vote">{{votes}}</span>
            <span class="text">{{text}}</span>
        </a>
      {{/each}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 5
  DESCRIPTION: The Template for the Petition user story, look on the documentation for more details.
-->
<template name="Petition">
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        {{#if askPetition}}
          <form name="Petition" id="Petition"> 
            <div class="form-group" name="subject-group" id="subject-group">
              <label>Petition Subject</label>
              <input type="text" name="Subject" class="form-control" placeholder={{PetitionMesg1}}>
            </div>
            <div class="form-group">
              <label>Description</label>
              <input type="text" name="Description" class="form-control" placeholder={{PetitionMesg2}}>
            </div>
            <div class="form-group">
              <label>Image</label>
              <input type="text" name="Image1" class="form-control" placeholder={{PetitionMesg3}}>
            </div>
            <div class="form-group">
              <label>Email</label>
              <input type="text" name="Email" class="form-control" placeholder={{PetitionMesg4}}>
            </div>
            <div class="form-group">
              <label>Votes needed</label>
              <input type="text" name="Votes" class="form-control" placeholder={{PetitionMesg5}}>
            </div>
            <input type="submit" class="btn btn-lg btn-primary btn-block" value="Create Petition">
          </form>
        {{else}}
          <input type="text" class="btn btn-lg btn-primary btn-block" value="Make Petition" id="askPetition" name="askPetition">
        {{/if}}
      </div>
    </div>
  </div>
  <br>
  <div class="Petitions">
      {{#each Petitions}}
          {{> peti}}
      {{/each}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 5
  DESCRIPTION: The Template for the Petition user story, look on the documentation for more details.
-->
<template name="peti">
  <div class="petitions well well-lg" data-id="{{_id}}">
    <h3>{{subject}}</h3> <a href="{{pathFor route='PetitionPage'}}">Link</a>
    <table>
      <tr>
        <td width="25%">
          <span class="text"><img src={{image1}} width="100%" height="200"></span>
        </td>
        <td id="petiTable" width="75%">
          <span class="text" width="100%">{{description}}</span>
        </td>
      </tr>
      {{#if Votes}}
        <tr>
          <td>
            <span class="text">Votes needed: {{Votes}}</span>
          </td>
        </tr>
      {{/if}}
    </table>
      {{#if Votes}}
        <a href="{{pathFor route='PetitionPage'}}"><input type="text" class="btn btn-lg btn-primary btn-block" value="Support Petition" id="supportPetition" name="supportPetition"></a>
      {{else}}
        <a href="pdf/{{_id}}"><input type="text" class="btn btn-lg btn-primary btn-block" value="See Supportives"></a>
      {{/if}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 5
  DESCRIPTION: The Template for the Signature user story, look on the documentation for more details.
-->
<template name="Signature">
  <div id="signature"></div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 5
  DESCRIPTION: The Template for the Petition user story, This is for the link of Iron Router, look on the documentation for more details.
-->
<template name="PetitionPage">
  <br>
  <div class="petitions well well-lg" data-id="{{_id}}">
    <h3>{{subject}}</h3>
    <table>
      <tr>
        <td width="25%">
          <span class="text"><img src={{image1}} width="100%" height="200"></span>
        </td>
        <td id="petiTable" width="75%">
          <span class="text" width="100%">{{description}}</span>
        </td>
      </tr>
      {{#if Votes}}
        <tr>
          <td>
            <span class="text">Votes needed: {{Votes}}</span>
          </td>
        </tr>
      {{/if}}
    </table>
    {{#if supportPetition}}
      <form name="Peti" id="Peti"> 
        <div class="form-group" name="First-group" id="First-group">
          <label>First Name:</label>
          <input type="text" name="First" class="form-control" placeholder={{petiMesg1}}>
        </div>
        <div class="form-group" name="Last-group" id="Last-group">
          <label>Last Name:</label>
          <input type="text" name="Last" class="form-control" placeholder={{petiMesg2}}>
        </div>
        <div class="form-group" name="Address-group" id="Address-group">
          <label>Address:</label>
          <input type="text" name="Address" class="form-control" placeholder={{petiMesg3}}>
        </div>
        <div class="form-group" name="signature-group" id="signature-group">
          <label>Signature:</label>
          {{> Signature}}
          <span class="text">{{petiMesg4}}</span>
        </div>
        <input type="submit" class="btn btn-lg btn-primary btn-block" value="Support Petition">
      </form>
    {{else}}
      {{#if Votes}}
        <input type="text" class="btn btn-lg btn-primary btn-block" value="Support Petition" id="supportPetition" name="supportPetition">
      {{else}}
        <a href="../pdf/{{_id}}"><input type="text" class="btn btn-lg btn-primary btn-block" value="See Supportives"></a>
      {{/if}}
    {{/if}}
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 7
  DESCRIPTION:.
-->
<template name="login">
  <div class="login-card">
    <img src="/Drawing.png" width="100%">
    <h1>Log-in</h1><br>
    <form>
      <input type="text" name="email" placeholder="Email">
      <input type="password" name="pass" placeholder="Password">
      <input type="submit" name="login" class="login login-submit" value="login">
    </form> 
    <div>{{mesg}}</div>
    <div class="login-help">
      <a id="redirlogin" href="/register">Register</a>
    </div>
  </div>
</template>
<!--
  AUTHOR AND PROGRAMMER: Eldar Feldbeine.
  SPRINT: 7
  DESCRIPTION:.
-->
<template name="register"> 
  <div class="login-card">
    <img src="/Drawing.png" width="100%"> 
    <h1>Register</h1><br>
    <form>
      <input type="text" name="user" placeholder="Username">
      <input type="text" name="email" placeholder="Email">
      <input type="text" name="zipcode" placeholder="Zipcode">
      <input type="password" name="pass" placeholder="Password">
      <input type="submit" name="login" class="login login-submit" value="register">
    </form> 
    <div>{{mesg}}</div>
    <div class="login-help">
      <a id="redirlogin" href="/login">Login</a>
    </div>
  </div>
</template>