<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">

  <script src="lib/json2.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/jquery.link.js" type="text/javascript" charset="utf-8"></script>

  <script src="lib/spine.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/spine.list.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/spine.model.local.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/spine.model.filter.js" type="text/javascript" charset="utf-8"></script>
  <script src="app/utils.js" type="text/javascript" charset="utf-8"></script>

  <script src="app/models/contact.js" type="text/javascript" charset="utf-8"></script>
  <script src="app/controllers/sidebar.js" type="text/javascript" charset="utf-8"></script>
  <script src="app/controllers/contacts.js" type="text/javascript" charset="utf-8"></script>
  <script src="app/application.js" type="text/javascript" charset="utf-8"></script>
  
  <script type="text/x-jquery-tmpl" id="contactsTemplate">
    <li class="item">
      <img src="images/missing.png" />
      {{if fullName()}}
        <span class="name">${fullName()}</span>
      {{else}}
        <span class="name empty">Brak danych</span>
      {{/if}}
      <span class="cta">&gt;</span>
    </li>
  </script>  
  
  <script type="text/x-jquery-tmpl" id="contactTemplate">
    <label>
      <span>Imię i nazwisko</span>
      ${first_name} ${last_name}
    </label>

    <label>
      <span>Adres email</span>
      {{if email}}
        ${email}
      {{else}}
        <div class="empty">Brak</div>
      {{/if}}
    </label>

    {{if mobile}}
    <label>
      <span>Numer telefonu komórkowego</span>
      ${mobile}
    </label>
    {{/if}}

    {{if work}}
    <label>
      <span>Numer telefonu do pracy</span>
      ${work}
    </label>
    {{/if}}

    {{if address}}
    <label>
      <span>Adres</span>
      <pre>${address}</pre>
    </label>
    {{/if}}

    <label>
      <span>Uwagi</span>
      {{if notes}}
        ${notes}
      {{else}}
        <div class="empty">Brak</div>
      {{/if}}
    </label>
  </script>
  
  <script type="text/x-jquery-tmpl" id="editContactTemplate">
    <label>
      <span>Imię</span>
      <input type="text" name="first_name" value="${first_name}" autofocus>
    </label>

    <label>
      <span>Nazwisko</span>
      <input type="text" name="last_name" value="${last_name}">
    </label>

    <label>
      <span>Adres email</span>
      <input type="text" name="email" value="${email}">
    </label>

    <label>
      <span>Numer telefonu komórkowego</span>
      <input type="text" name="mobile" value="${mobile}">
    </label>

    <label>
      <span>Numer telefonu do pracy</span>
      <input type="text" name="work" value="${work}">
    </label>

    <label>
      <span>Adres</span>
      <textarea name="address">${address}</textarea>
    </label>

    <label>
      <span>Uwagi</span>
      <textarea name="notes">${notes}</textarea>
    </label>
  </script>  
</head>
<body>
  <header id="title">
    <h1>Dane kontaktowe Spine</h1>
  </header>
  
  <div id="wrapper">
  
  <div id="sidebar">
    <div class="search">
      <input type="search" placeholder="Szukaj" results="0" incremental="true" autofocus>
    </div>
    
    <ul class="items">
    </ul>
    
    <footer>
      <button>Nowa osoba</button>
    </footer>
  </div>
  
  <div class="vdivide"></div>
  
  <div id="contacts">
    <div class="show">
      <ul class="options">
        <li class="optEdit">Edytuj dane</li>
        <li class="optEmail">Wyślij dane</li>
      </ul>
      <div class="content"></div>
    </div>
    
    <div class="edit">
      <ul class="options">
        <li class="optSave default">Zapisz dane</li>
        <li class="optDestroy">Usuń dane</li>
      </ul>
      <div class="content"></div>
    </div>
  </div>
  
  </div>
</body>
</html>