<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Sample | Quickblox JS SDK</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

  <link rel="shortcut icon" href="https://quickblox.com/favicon.ico">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" >

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="app" id="j-app">
    <p class="auth">Initialize the application...</p>
  </main>

  <div class="overlay" id="j-overlay"></div>

  <!-- TEMPLATES -->
  <script id="app-tpl" type="text/x-handlebars-template">
    <section id="j-header"></section>

    <section class="map">
      <div id="j-map" class="map_gmap"></div>
    </section>

    <section id="j-panel"></section>

    <div class="version">v.{{version}}</div>
  </script>

  <script id="header-tpl" type="text/x-handlebars-template">
    <header class="header">
      <div class="header__inner">
        <div class="header__body">
          <div class="logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
              <g fill="none" fill-rule="evenodd">
                <path fill="#046AD0" d="M8.4765 6.728c0 .9158-.75 1.665-1.667 1.665H1.8094c-.9167 0-1.6667-.7492-1.6667-1.665V1.7336C.1426.818.8926.069 1.8093.069h5.0003c.917 0 1.667.749 1.667 1.6646V6.728M8.4765 18.3816c0 .9155-.75 1.6646-1.667 1.6646H1.8094c-.9167 0-1.6667-.749-1.6667-1.6646V13.387c0-.9154.75-1.6646 1.6667-1.6646h5.0003c.917 0 1.667.7492 1.667 1.6647v4.9946M8.4765 30.035c0 .9154-.75 1.6646-1.667 1.6646H1.8094c-.9167 0-1.6667-.7492-1.6667-1.6647v-4.9943c0-.9158.75-1.665 1.6667-1.665h5.0003c.917 0 1.667.7492 1.667 1.665v4.9942M20.1437 6.728c0 .9158-.75 1.665-1.667 1.665h-5c-.9167 0-1.6667-.7492-1.6667-1.665V1.7336c0-.9156.75-1.6647 1.6667-1.6647h5c.917 0 1.667.749 1.667 1.6646V6.728M20.1437 30.035c0 .9154-.75 1.6646-1.667 1.6646h-5c-.9167 0-1.6667-.7492-1.6667-1.6647v-4.9943c0-.9158.75-1.665 1.6667-1.665h5c.917 0 1.667.7492 1.667 1.665v4.9942M31.811 6.728c0 .9158-.75 1.665-1.6668 1.665h-5c-.9168 0-1.667-.7492-1.667-1.665V1.7336c0-.9156.7502-1.6647 1.667-1.6647h5c.9167 0 1.667.749 1.667 1.6646V6.728M31.811 18.3816c0 .9155-.75 1.6646-1.6668 1.6646h-5c-.9168 0-1.667-.749-1.667-1.6646V13.387c0-.9154.7502-1.6646 1.667-1.6646h5c.9167 0 1.667.7492 1.667 1.6647v4.9946"/>
                <path fill="#4AD24D" d="M35.9778 34.197c0 .9157-.75 1.6648-1.6666 1.6648h-9.167c-.9168 0-1.667-.749-1.667-1.665v-9.156c0-.916.7502-1.665 1.667-1.665h9.167c.9166 0 1.6666.749 1.6666 1.665v9.156"/>
              </g>
            </svg>
          </div>

          <h2 class="header_title">Data Sample</h2>
          <p class="header_user">Logged in as {{full_name}}</p>
        </div>

        <button class="logout" id="j-logout">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
            <g fill="none" fill-rule="evenodd">
              <path d="M-3-3h24v24H-3"/>
              <path fill="#778594" d="M7.09 12.59L8.5 14l5-5-5-5-1.41 1.41L9.67 8H0v2h9.67l-2.58 2.59zM16 0H2C.89 0 0 .9 0 2v4h2V2h14v14H2v-4H0v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" class="icon" opacity=".8"/>
            </g>
          </svg>
        </button>
      </div>
    </header>
  </script>

  <script id="places_preview-tpl" type="text/x-handlebars-template">
    <div class="panel places">
      {{#each items}}
        <section class="place_preview j-place" data-id="{{_id}}">
            {{#if media}}
              <div class="place_preview__preview">
                <img class="img" src="{{getPreviewUrl media}}" alt="{{title}}" onerror="this.src='https://samples.quickblox.com/web/resources/place-placeholder.svg'">
              </div>
            {{else}}
              <div class="place_preview__preview place_preview__default"></div>
            {{/if}}
          <div class="place_preview__info">
            <h5 class="place_preview__title">{{title}}</h5>
            <p class="rate">{{rate}}</p>
            <p class="place_preview__description">{{description}}</p>
          </div>
        </section>
      {{else}}
        <section class="empty_state">
          <img class="empty_state__img" src="https://samples.quickblox.com/web/resources/empty_state.gif" alt="empty state of list places">
          <h5 class="empty_state__title">No places saved.</h5>
          <p class="empty_state__desc">Tap somewhere on the map for creating a new place.</p>
        </section>
      {{/each}}
    </div>
  </script>

  <script id="new_place-tpl" type="text/x-handlebars-template">
    <div class="panel place_create">
      <div class="panel__top">
        <button class="back" id="j-to_dashboard"></button>

        <h2 class="panel__title">Create a new place</h2>
      </div>

      <div class="form panel__body">
        <form id="j-create" autocomplete="off">
          <input id="latlng" type="hidden" value={{latLng}}>

          <div class="form_item">
            <input id="title" class="inp" type="text" required pattern="[A-Za-z\s]{4,40}" title="Only latin from 4 to 40 symbols" placeholder="Place name">
          </div>

          <div class="form_item">
            <input id="description" class="inp" type="text" required pattern="[A-Za-z\s]{4,80}" title="Only latin from 4 to 80 symbols" placeholder="Description" >
          </div>

          <div class="form_item">
            <label for="rate">Rate</label>
            <input id="rate"  class="inp" type="number" min="0" max="5" step="0.1" value="5" required>
          </div>

          <div class="form_item"  class="form_item form_item-media">
            <p class="form_label">Add Media</p>

            <div class="form_media_wrap" id="media_wrap">
              <label for="media" class="form_label--media"></label>
              <input id="media" class="form_media j-media" multiple type="file" accept="image/*">
            </div>
          </div>

          <div class="form_item">
            <button class="btn btn-action">Create Place</button>
          </div>
        </form>
      </div>
    </div>
  </script>

  <script id="place_detailed-tpl" type="text/x-handlebars-template">
    <div class="panel place">
      <div class="panel__top">
        <button class="back" id="j-to_dashboard"></button>
        <h2 class="panel__title">{{title}}</h2>
      </div>

      <div class="panel__rate">
          <h4 class="h4">Rate Place: <span>{{rate}}</span></h4>
      </div>

      <div class="panel__body">

        <div class="place__action">
          <button class="btn btn-action" id="j-checkin">Check in</button>
          {{#if isCanUploadMedia}}
            <label for="add_media" class="btn-add_media">
              <svg xmlns="http://www.w3.org/2000/svg" width="23" height="21" viewBox="0 0 23 21">
                <g fill="none">
                  <g transform="translate(-287 -84)translate(287 83)">
                    <polygon points="24 24 0 24 0 0 24 0"/>
                    <path d="M3 4L3 1 5 1 5 4 8 4 8 6 5 6 5 9 3 9 3 6 0 6 0 4 3 4 3 4ZM6 10L6 7 9 7 9 4 16 4 17.8 6 21 6C22.1 6 23 6.9 23 8L23 20C23 21.1 22.1 22 21 22L5 22C3.9 22 3 21.1 3 20L3 10 6 10 6 10ZM13 19C15.8 19 18 16.8 18 14 18 11.2 15.8 9 13 9 10.2 9 8 11.2 8 14 8 16.8 10.2 19 13 19L13 19ZM9.8 14C9.8 15.8 11.2 17.2 13 17.2 14.8 17.2 16.2 15.8 16.2 14 16.2 12.2 14.8 10.8 13 10.8 11.2 10.8 9.8 12.2 9.8 14L9.8 14Z" fill="#778594" opacity=".8" class="icon"/>
                  </g>
                </g>
              </svg>
            </label>
          {{/if}}
          <input id="add_media" class="form_media j-add_media" multiple type="file" accept="image/*">
        </div>

        {{#if media}}
          <div class="carousel siema">
            {{#each media}}
              <div class="place__img_wrap j-photo">
                <img class="place__img" src="{{getImageUrl this}}" onerror="this.src='https://samples.quickblox.com/web/resources/place-placeholder.svg'">
              </div>
            {{/each}}
          </div>
          <button class="carousel_nav carousel_nav_prev j-prev">
            <svg width="18px" height="29px" viewBox="0 0 18 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Location" transform="translate(0.000000, -174.000000)" fill="#DDE0E2">
                  <g id="arrow-left" transform="translate(0.000000, 174.000000)">
                    <path d="M0,4.00187852 C0,1.79170204 1.79171562,0 3.9947834,0 L18,0 L18,29 L3.9947834,29 C1.78852545,29 0,27.2078053 0,24.9981215 L0,4.00187852 Z M6,19.59 L7.41,21 L13.41,15 L7.41,9 L6,10.41 L10.58,15 L6,19.59 Z" transform="translate(9.000000, 14.500000) scale(-1, 1) translate(-9.000000, -14.500000)" class="icon"></path>
                  </g>
                </g>
              </g>
            </svg>
          </button>
          <button class="carousel_nav carousel_nav_next j-next">
            <svg width="18px" height="29px" viewBox="0 0 18 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs></defs>
              <g id="Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Location" transform="translate(-309.000000, -174.000000)" fill="#DDE0E2">
                  <g id="arrow-right" transform="translate(309.000000, 174.000000)">
                    <path d="M0,4.00187852 C0,1.79170204 1.79171562,0 3.9947834,0 L18,0 L18,29 L3.9947834,29 C1.78852545,29 0,27.2078053 0,24.9981215 L0,4.00187852 Z M6,19.59 L7.41,21 L13.41,15 L7.41,9 L6,10.41 L10.58,15 L6,19.59 Z" class="icon"></path>
                  </g>
                </g>
              </g>
            </svg>
          </button>
        {{/if}}

        <div class="place__section">
          <h4 class="h4">Description</h4>
          <p>{{description}}</p>
        </div>

        <div class="place__section">
          <h4 class="h4">Check-ins</h4>
          <div id="j-checkins"></div>
        </div>
      </div>
    </div>
  </script>

  <script id="checkins-tpl" type="text/x-handlebars-template">
    {{#each items}}
      <div class="checkin">
        <p>{{author_fullname}}</p>
        <p>{{comment}}</p>
      </div>
    {{else}}
      <p class="txt-warn">No checkins, click on button the 'CHECK IN' and leave your feedback.</p>
    {{/each}}
  </script>

  <script id="checkin-tpl" type="text/x-handlebars-template">
    <div class="popup">
      <div class="form">
        <form id="checkin-submit">
          <div class="form_item">
            <h4 class="form__title">Check in</h4>
          </div>
          <input id="checkin_id" type="hidden" value={{id}}>

          <div class="form_item">
            <input id="checkin_comment" class="inp"
              type="text" 
              placeholder="Enter your comment" 
              pattern="[A-Za-z\s]{4,40}"
              title="Only latin from 4 to 40 symbols"
              required>
          </div>

          <div class="form_item">
            <label for="rate">Rate the place</label>
            <input id="checkin_rate"  class="inp" type="number" min="0" max="5" step="0.1" value="0" required>
          </div>

          <div class="form_item">
            <button type="submit" id="checkin-submit" class="btn btn-action">Check in</button>
            <button id="checkin-cancel" class="btn">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </script>

  <!-- Images for preload -->
  <div id="preload">
    <img src="https://samples.quickblox.com/web/resources/marker.png" width="1" height="1" alt="Preload image" />
    <img src="https://samples.quickblox.com/web/resources/marker_create.png" width="1" height="1" alt="Preload image" />
  </div>

  <!-- Polyfills -->
  <script>
      (function(ELEMENT) {
          ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
          ELEMENT.closest = ELEMENT.closest || function closest(selector) {
              if (!this) return null;
              if (this.matches(selector)) return this;
              if (!this.parentElement) {return null}
              else return this.parentElement.closest(selector)
          };
      }(Element.prototype));
  </script>

  <!-- Helper libraries -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxg7dFxOIQWCUEBCrUAnU3qf5Xm-ejb0E"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
  <script src="https://unpkg.com/siema@1.4.6"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.14.0/load-image.all.min.js"></script>

  <!-- Quickblox SDK, uses as global variable QB -->
  <script src="../../quickblox.min.js"></script>
  
  <!-- APP -->
  <script src="config.js"></script>
  
  <script src="./js/handlebars_helpers.js"></script>
  <script src="./js/user.js"></script>
  <script src="./js/places.js"></script>
  <script src="./js/map.js"></script> 
  <script src="./js/checkin.js"></script>
  <script src="./js/content.js"></script>
  <script src="./js/app.js"></script>
</body>
</html>
