{% extends 'partials/base.html' %}

{% load thumbnail %}


{% block head_css %}
    <style>
        .-live-image-upload-container .-position-relative-parent {position: relative}
        
        .-live-image-upload-container .-image-delete,
        .-live-image-upload-container .-live-image-delete {
            position: absolute;
            top: 0;
            right: 0;
            background-color: white;
        }
    </style>
{% endblock %}

{% block content %}
    {% include 'partials/header.html' %}

    <div class="container mainScore">
        <div class="row">
            <div class="col-lg-12 allProjects">
                <p class="titleScore">Изменение готового проекта</p>
            </div>

    <form method="post" enctype="multipart/form-data" id="worksell-add-form">{% csrf_token %}
        <div class="textAreaBlock2 text-nn box-sizing disTab">
            <p>Название заказа <span style="color: red">{{ form.name.errors.as_text }}</span></p>
            <input type="text" class="box-sizing" name="{{ form.name.html_name }}" value="{{ form.name.value }}">
            <input type="hidden" name="{{ form.contractor.html_name }}" value="{{ form.contractor.value }}" />
        </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
            <p>Подробно опишите задание <span style="color: red">{{ form.description.errors.as_text }}</span></p>
            <textarea name="{{ form.description.html_name }}" id="text-new">{{ form.description.value }}</textarea>
        </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
            <p>Специализации <span style="color: red">{{ form.specialization.errors.as_text }}</span></p>
         </div>
        
        <div class="-spec-select-container">
            <div class="col-lg-3">
                <input type='hidden' class="-spec-select -spec-select-level-1" style="width: 100%">
            </div>

            <div class="col-lg-3">
                <input type='hidden' class="-spec-select -spec-select-level-2" style="width: 100%">
            </div>

            <div class="col-lg-3">
                <input type='hidden' class="-spec-select -spec-select-level-3" style="width: 100%">
            </div>

            <div class="col-lg-3">
                <input type='hidden' class="-spec-select -spec-select-level-4" style="width: 100%">
            </div>

            <input type="hidden" class="-chosen-spec-id" name="{{ form.specialization.html_name }}"
                   value="{{ form.specialization.value }}">
        </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
           <p>Бюджет <span style="color: red">{{ form.budget.errors.as_text }}</span></p>
            <div class="row">
                <div class="col-lg-8">
                    <input type="text" class="box-sizing" name="{{ form.budget.html_name }}" value="{{ form.budget.value }}">
                </div>
                <div class="col-lg-4">
                    <div class="polsF1" style="padding:0;">
                        {{ form.currency}}
                    </div>
                </div>
            </div>
       </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
           <p>Срок выполнения <span style="color: red">{{ form.budget.errors.as_text }}</span></p>
            <div class="row">
                <div class="col-lg-8">
                    <input type="text" class="box-sizing" name="{{ form.term.html_name }}" value="{{ form.term.value }}">
                </div>
                <div class="col-lg-4">
                    <div class="polsF1" style="padding:0;">
                        {{ form.term_type }}
                    </div>
                </div>
            </div>
       </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
            </div>
        <div class="col-lg-6">
            <div class="polsF1 disTab" style="padding:0;">
                <p>Вид строительства <span style="color: red">{{ form.construction_type.errors.as_text }}</span></p>
                {{ form.construction_type }}
            </div>
        </div>

        <div class="col-lg-6">
            <div class="polsF1 disTab" style="padding:0;">
                <p>Классификация здания <span style="color: red">{{ form.building_classification.errors.as_text }}</span></p>
                {{ form.building_classification }}
            </div>
        </div>
        
        <div class="textAreaBlock2 text-nn box-sizing disTab -live-image-upload-container">
            <p>Фотографии <span style="color: red">{{ form.photos.errors.as_text }}</span></p>
            
            {% for photo in form.photos.field.queryset.all %}
                <div class="col-lg-3 -image-widget">
                    <div class="-position-relative-parent" style="display: inline-block">
                        <a href="#" onclick="return false" class="btn close -image-delete">&times;</a>
                        
                        {% thumbnail photo.img "200x200" crop="center" as img %}
                            <img src="{{ img.url }}">
                        {% endthumbnail %}
                    </div>
                    
                    <input type="checkbox" name="{{ form.photos.html_name }}" value="{{ photo.pk }}" checked style='display: none'>
                </div>
            {% endfor %}
            
            <script type="text/x-template" class="-templ">
                <% images.forEach(function(image) { %>
                    <div class="col-lg-3">
                        <div class="-position-relative-parent" style="display: inline-block">
                            <a href="#" onclick="return false" data-image-id="<%- image.id %>" class="btn close -live-image-delete">&times;</a>
                            <img src="<%- image.smallThumbnailUrl %>">
                        </div>
                        
                        <input type="checkbox" name="{{ form.live_images.html_name }}" value="<%- image.id %>" checked style='display: none'>
                    </div>
                <% }) %>
            </script>
            
            <div class="-res"></div>
            <div class="row">
                <div class="col-xs-12">
                    <input type="file" name="image" multiple class="-live-image-upload-field" style="display: none">   
                    <a href="#" onclick="$(this).closest('.-live-image-upload-container').find('.-live-image-upload-field').first().click(); return false" class="btn btn-default add_file_to_port" style="margin-top:20px;">
                        Выберите файлы
                    </a>
                </div>
            </div>
        </div>

        <div class="polsF1 polsF2 disTab">

        </div>

        <div class="links-filter">
                <input class="btn-submit-link" type="submit" value="Сохранить проект">
            </div>

    </form>
            {% include 'partials/footer.html' %}
        </div>
    </div>
{% endblock %}