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


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

        }

    </style>
{% endblock %}

{% block content_list %}
    {{ wizard.form.media }}

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

    <div class="page-body clearfix">
        <form action="" method="post" enctype="multipart/form-data">{% csrf_token %}


            <div class="set-sect p-form adm-form passed">
                <div class="set-sect-title clearfix">
                    <h3>Шаг 1. Основная информация</h3>

                    <div class="afh-right">
                        <button name="wizard_goto_step" type="submit" class="button icon-edit"
                                value="{{ wizard.steps.first }}">изменить
                        </button>
                    </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">
                        <button name="wizard_goto_step" type="submit" class="button icon-edit"
                                value="{{ wizard.steps.prev }}">изменить
                        </button>
                    </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.errors }}
                {{ wizard.management_form }}
                {% if wizard.form.forms %}
                    {{ wizard.form.management_form }}
                    {% for form in wizard.form.forms %}
                        {{ form }}
                    {% endfor %}
                {% else %}
                {% with wizard.form as form %}
                    <hr/>
                    <div class="mf-photos-list">
                        <div class="mfpl-button-line">
                            <div class="mfpl-button">
                                {{ form.attachments }}
                            </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">
                            <button class="button big grey a-more" type="submit">пропустить этот шаг</button>
                        </div>

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

                    </div>
                {% endwith %}
            {% endif %}
            </div>
        </form>

    </div>
   <!-- for response debugging -->
   {% comment %} <script>
       $("#next").click(function(e){
           e.preventDefault();
    $.ajax({url: '/wizard/ajax/', success: function(result){
        $("#res").html(result);
    }});
});
    </script>{% endcomment %}

    <script type="text/javascript">
        var cnt = 0;
        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_',
                            cnt.toString(), '" cols="30" rows="10" placeholder="Описание"></textarea></div></div>',
                            '</li>'].join('');
                        cnt +=1 ;
                        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 %}