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

{% block content %}
	<section class="mainContainer">
        {% include 'partials/header.html' %}
		
		<div class="container-fluid">
			<div class="row">
				<p class="welcomeMain">{{ main_settings.heading }}</p>
			</div>
		</div>
		
		<div class="container-fluid">
			<div class="row">
                <div class="col-lg-6">
					<div class="changeBlock changeBlock2">
                        {% if request.user.is_authenticated and request.user.is_customer %}
                            <a href="{% url 'users:customer-profile-open-projects' pk=request.user.pk %}">Я заказчик</a>
                        {% else %}
						    <a href="{% url 'registration_register' %}?type=customer">Я заказчик</a>
                        {% endif %}
						<p>
							{{ main_settings.customer_text|safe }}
                        </p>
					</div>
                    <div class="square">
						<div class="insetSquare"></div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="changeBlock changeBlock1">
                        {% if request.user.is_authenticated and request.user.is_contractor %}
                            <a href="{% url 'users:contractor-profile' pk=request.user.pk %}">Я исполнитель</a>
                        {% else %}
                            <a href="{% url 'registration_register' %}?type=contractor">Я исполнитель</a>
                        {% endif %}
						<p>
							{{ main_settings.contractor_text|safe }}
                        </p>
					</div>

				</div>

			</div>
		</div>
		
		<div class="container-fluid">
			<div class="row">
                <a class="popup-youtube" href="{{ main_settings.video_code }}">
                    <div class="youtube"></div>
                </a>

{#                <!-- Modal HTML -->#}
{#                <div id="myModal" class="modal fade">#}
{#                    <div class="modal-dialog">#}
{#                        <div class="modal-content">#}
{#                            <div class="modal-header">#}
{#                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>#}
{#                                <h4 class="modal-title">Видео</h4>#}
{#                            </div>#}
{#                            <div class="modal-body">#}
{#                                <div id="modal-body-video">#}
{#                                    {{ main_settings.video_code | safe }}#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
			</div>
		</div>
	</section>
{% endblock %}

{% block js_block %}
    <script>
        $(document).ready(function() {
            $('.popup-youtube').magnificPopup({
                disableOn: 700,
                type: 'iframe',
                mainClass: 'mfp-fade',
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false
            });
        });
        
{#        $(document).ready(function(){#}
{#            var modalBodyVideo = $("#modal-body-video").clone(true);#}
{#            #}
{#            $("#myModal").on('hide.bs.modal', function(){#}
{#                $("#modal-body-video").remove();#}
{#            });#}
{#        #}
{#            $("#myModal").on('show.bs.modal', function(){#}
{#                $("#modal-body-video").remove();#}
{#                modalBodyVideo.appendTo('.modal-body');#}
{#            });#}
{#        });#}
    </script>
{% endblock %}