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

{% load thumbnail %}
{% load i18n %}

{% 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" class="-spec-work-type-combo-container">
        {% csrf_token %}

        {{ form.errors }}

        <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>{% trans 'project_stage0' %} <span style="color: red">{{ form.work_type.errors.as_text }}</span></p>
        </div>

        <div class="col-lg-3">
          <div class="polsF1 disTab" style="padding:0;">
            {{ form.work_type }}
          </div>
        </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
        </div>

        <div class="col-lg-3 -single-spec-select">
          <div class="-bold">{% trans 'project_stage1' %} <span
              style="color: red">{{ form.specialization.errors.as_text }}</span></div>
          <input type='hidden' class="-spec-select -spec-select-level-1" style="width: 100%">
        </div>

        <div class="col-lg-3 -single-spec-select">
          <div class="-bold"><span class="-dynamic-label">{% trans 'project_stage2' %}</span></div>
          <input type='hidden' class="-spec-select -spec-select-level-2" style="width: 100%">
        </div>

        <div class="col-lg-3 -single-spec-select">
          <div class="-bold">{% trans 'project_stage3' %}</div>
          <input type='hidden' class="-spec-select -spec-select-level-3" style="width: 100%">
        </div>

        <div class="col-lg-3 -single-spec-select">
          <div class="-bold">{% trans 'project_stage4' %}</div>
          <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 class="textAreaBlock2 text-nn box-sizing disTab">
          <p>Бюджет{{ form.budget.errors.as_text }}</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">
              {{ form.currency }}
            </div>
          </div>
        </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
          <p>Срок выполнения{{ form.budget.errors.as_text }}</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">
              {{ form.term_type }}
            </div>
          </div>
        </div>

        <div class="textAreaBlock2 text-nn box-sizing disTab">
        </div>
        <div class="polsF1 polsF2 disTab">
          <p>Вид строительства</p>
          {{ form.construction_type }}
        </div>

        <div class="polsF1 polsF2 disTab">
          <p>Классификация здания</p>
          {{ form.building_classification }}

        </div>


        <div class="textAreaBlock2 text-nn box-sizing disTab -live-image-upload-container">
          <p>Фотографии</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="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">
              Выберите файлы
            </a>
          </div>
        </div>


        <div class="textAreaBlock2 text-nn box-sizing disTab">

        </div>
        <div class="searchF1 polsF1 polsFF links-filter">
          <input type="submit" value="Сохранить" class="btn-submit-link add_file_to_port">
          <a href="{% url 'users:contractor-profile' request.user.pk %}"
             class="btn-submit-link add_file_to_port">Отмена</a>


        </div>

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