{% for i in pr %}
{% if forloop.counter <= 5 %}
<div class="tableproduct" align="center">
<br>
{{ i.product_name }}<br><br>
<div style="position: absolute; float: left; top: 80px; margin-left: 20px; margin-right: 20px">
{% if i.product_img1 %}
<img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img1 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img2 %}
<img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img2 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img3 %}
<img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img3 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img4 %}
<img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img4 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img5 %}
<img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img5 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}">
{% endif %}</div>
<div class="b11" style="position: absolute; float: left; top: 80px; left: 70px;"><img style="position: relative;" src="{% static "static/style/testdoor.png" %}" name="imgcolordoor{{ forloop.counter }}" width="130px" height="280px"></div>
<div style="position: relative; float: left; margin-left: 25px;">
<form name="callzamer" action="/shoponeclick" method="post" onsubmit="return validate_form_callzamer ( );">
{% csrf_token %}
<div id="pop-up-zamer{{ forloop.counter }}" style="background: url('{% static "static/style/fonpopup.png" %}'); height: 100%; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1;">
<div id="pop-zamer{{ forloop.counter }}" style="background-image: url('{% static "static/style/callme.png" %}'); background-repeat: repeat-x; padding: 5px; height: 412px; width: 547px; position: fixed; top: 130px; left: 30%; z-index: 3;">
<img class="close" style="margin-right: 20px" onclick="hidewindowcall('pop-up-zamer{{ forloop.counter }}')"><br>
<span style="position: absolute; top: 40px;">{{ i.product_name }}{{ i.product_firm }}</span>
<div style="position: absolute; left: 20px; top: 40px;">
{% if i.product_img1 %}
<input type="radio" value="{{ i.product_img1 }}" checked name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img1 }}'"><img style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img2 %}
<input type="radio" value="{{ i.product_img2 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img2 }}'"><img style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img3 %}
<input type="radio" value="{{ i.product_img3 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img3 }}'"><img style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img4 %}
<input type="radio" value="{{ i.product_img4 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img4 }}'"><img style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
{% endif %}{% if i.product_img5 %}
<input type="radio" value="{{ i.product_img5 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img5 }}'"><img style="position: relative;" src="{% static "static/style/colortest.png" %}">
{% endif %}
</div>
<div class="b11" style="position: absolute; float: left; top: 40px; left: 100px;"><img onchange="console.log(imgcolordoor1{{ forloop.counter }}.src)" style="position: relative;" src="{% static "static/style/testdoor.png" %}" name="imgcolordoor1{{ forloop.counter }}" width="130px" height="280px"></div>
<span style=" position: absolute; top: 100px;">
<input style="max-width: 15px; border: 1px solid lightgray; border-radius: 3px; padding: 3px;" type="text" value="1" name="number{{ forloop.counter }}"> шт.
</span>
<br>
<input id="inputtextname" style="position: absolute; top: 130px;" placeholder="Имя" onclick="value=''" type="text" name="name">
<input id="inputtextcity" style="position: absolute; top: 160px;" placeholder="Город" onclick="value=''" type="text" name="city">
<input id="inputtextcall" style="position: absolute; top: 190px;" placeholder="Телефон" onclick="value=''" type="text" name="mobile">
<input style="display: none" value="{{ i.product_name }} {{ i.product_firm }}" name="tov">
<span style="position: absolute; top: 220px; ">
<p style="margin: 0px; margin-bottom: 2px; margin-left: -35px;">Коментарий к заказу:</p>
<textarea rows="7" cols="25" name="abhzd"> </textarea>
</span>
<input class="shopzakaz" type="submit" value="">
</div>
</div>
</form>
</div>
<script>hidewindowcall('pop-up-zamer{{ forloop.counter }}')</script>
<div style="position: absolute; float: left; top: 390px; left: 20px;">
<img onclick="hidewindowcall('pop-up-zamer')" src="{% static "static/style/zamerzaktov.png" %}">
<img onclick="hidewindowcall('pop-up-zamer{{ forloop.counter }}')" src="{% static "static/style/shoponeclick.png" %}">
</div>
</div>
{% if forloop.counter < 5 %}
<img style="position: relative; float: left;" src="{% static "static/style/vertsep.png" %}">
{% endif %}
{% endif %}
{% endfor %}
<div class="b11" style="position: absolute; float: left; top: 40px; left: 100px;"><img onchange="console.log(imgcolordoor1{{ forloop.counter }}.src)" style="position: relative;" src="{% static "static/style/testdoor.png" %}" name="imgcolordoor1{{ forloop.counter }}" width="130px" height="280px"></div>
name="imgcolordoor1{{ forloop.counter }}"