{% extends "client/base_catalog.html" %}


{% block styles %}
<style>
  .thumb {
    height: 175px;
    border: 1px solid #000;

  }

</style>
{% endblock %}

{% block content_list %}


<div class="page-title">
    <h1>Добавить событие</h1>
</div>

<div class="page-body clearfix">

    <div class="set-sect p-form adm-form passed">
        <div class="set-sect-title clearfix">
            <h3>Шаг 1. Основная информация</h3>
            <div class="afh-right">
                <a class="button icon-edit" href="#">изменить</a>
            </div>
        </div>
    </div>
    <div class="set-sect p-form adm-form passed">
        <div class="set-sect-title clearfix">
            <h3>Шаг 2. Статистика и условия участия</h3>
            <div class="afh-right">
                <a class="button icon-edit" href="#">изменить</a>
            </div>
        </div>
    </div>
    <div class="set-sect p-form adm-form">
        <div class="set-sect-title clearfix">
            <h3>Шаг 3. Добавление фото</h3>
            <div class="afh-right">
                <div class="sst-info"><b>+ 1,2 балла</b> к рейтингу</div>
            </div>
        </div>

        <form action="" method="post" enctype="multipart/form-data">{% csrf_token %}
            <hr />

            <div class="mf-photos-list">
                <div class="mfpl-button-line">
                    <div class="mfpl-button">
                        <input class="button big icon-camera" value="выберите фотографии" type="file" id="files" name="files[]" multiple />
                    </div>

                    <div class="mfpl-text">
                        <p>более полная информация повышает рейтинг вашего мероприятия и позволяет ранжировать его выше других</p>
                    </div>
                </div>

            </div>

            <ul id="list"></ul>
            <div class="a-bot-buttons-line clearfix">

                <div class="abb-left">
                    <a class="button big grey a-more" href="#">пропустить этот шаг</a>
                </div>

                <div class="abb-right">
                    <button class="button big orange a-more" type="submit">далее</button>
                </div>

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

</div>
<script type="text/javascript">
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var div = document.createElement('div');
          div.innerHTML = ['<li><div class="mfpli-pict"> <img class="thumb" src="', e.target.result,
                            '" title="', theFile.name,
                            '"/></div>','<div class="mfpli-body"> <div class="mf-line full-width"> <div class="mf-field"> <textarea name="pdescr',
                            i.toString(),'" cols="30" rows="10" placeholder="Описание"></textarea></div></div>',
                            '</li>'].join('');
          document.getElementById('list').insertBefore(div, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
{% endblock %}