<head>
  <title>image_share</title>
</head>

<body>
</body>

<template name="ApplicationLayout">
  {{> yield "navbar" }}
  {{> yield "main" }}
</template>

<template name="welcome">
  <div class="container">
    <div class="jumbotron">
      <h1>Welcome to image share {{ username }} !</h1>
      <a href="/images" class="btn btn-info">ENTER</a>
    </div>
  </div>
</template>

<template name="navbar">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      {{> loginButtons }}
    </div>
  </nav>
</template>

<template name="image">
  <div class="container">
    <h2>{{ img_alt }}</h2>
    <a href="/images"><img src="{{ img_src }}" class="single-img" /></a>
  </div>
</template>

<template name="image_add_form">
  <div class="modal fade" id="image_add_form">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title"></div>
        </div>
        <div class="modal-body">
          <form class="js-add-image">
            <input type="text" name="img_src" />
            <br /><input type="text" name="img_alt" />
            <button class="btn btn-success">save</button>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-warning" data-dismiss="modal">cancel</button>
        </div>
      </div>
    </div>
  </div>
</template>

<template name="images">
  <div class="container">
    {{> image_add_form }}
    {{#if currentUser }}
      <button class="btn btn-success js-show-image-form">add image</button>
    {{/if}}

    {{#if filtering_images }}
      <h2>Showing images by user {{ getFilterUser }}. <a href="#" class="js-unset-image-filter">Show all images</a></h2>
    {{/if}}

    <div class="row">
      {{#each images}}
        <div class="col-xs-12 col-md-3" id="{{_id}}">
          <div class="thumbnail">

            <a href="/image/{{ _id }}"><img class="thumbnail-img js-image" src="{{img_src}}" alt="{{img_alt}}" /></a>

            <div class="caption">
              <h3>Rating: {{ rating }}</h3>
              <p>{{ img_alt }}</p>
              <p>User: <a href="#" class="js-set-image-filter">{{ getUser createdBy }}</a></p>
              <p>{{> starsRating mutable=true class="js-rate-image" id=image_id }}</p>
              <button class="js-del-image btn btn-warning">delete</button>
            </div>
          </div>
        </div> <!-- / col -->
      {{/each}}
    </div> <!-- / row -->
  </div><!-- / div.container -->
</template>
