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

{% block content %}
    {% include 'partials/header.html' %}
    {% load staticfiles %}
    {% load humanize %}
	<div class="container mainScore">
		<div class="row">
			<div class="col-lg-12 allProjects">
				<h1>Чат</h1>
			</div>
			<div class="btnReadyBlock disTab">
				<div class="triangle1"></div>
				<div class="col-lg-6 col-lg-offset-3 tabsChat">
					<div class="profileTabs2">
						<ul class="nav nav-tabs nav-justified">
  							<li role="presentation" class="active">
  								<a href="#tab1" data-toggle="tab">Личные</a>
  							</li>
  							<li role="presentation">
  								<a href="#tab2" data-toggle="tab">Заказчики</a>
  							</li>
  							<li role="presentation">
  								<a href="#tab3" data-toggle="tab">Исполнители</a>
  							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="tab-content">
			<div class="chatBlock disTab tab-pane fade in active" id="tab1">
				<div class="col-lg-3 wrMessages">
					<div class="messageBlock box-sizing disTab">
						<p>Заказы</p>
						<div class="orderBlock box-sizing">
							<span class="dimovChat"></span>
							<p class="titleOB">
								Дизай-проект квартиры на набережной 200 m2
							</p>
							<div class="hideOBB">
								<p class="pOB">
								<span>Испонитель:</span> Группа Икс
								</p>
								<ul class="listChat1">
									<li>Иванов Петр Иванович</li>
									<li>Сергей Пенкин</li>
									<li>Александ Смирнов</li>
									<li>Иванов Петр</li>
								</ul>
								<p class="pOB">
									<span>Чаты:</span> Иванов, Петров, Пенкин
								</p>
								<a href="javascript:void(0)" class="linkChat11">
									<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
									Полное описание заказа
								</a>
							</div>
						</div>
						<div class="orderBlock box-sizing">
						<span class="dimovChat"></span>
							<p class="titleOB">
								Дизай-проект квартиры на набережной 200 m2
							</p>
							<div class="hideOBB">
								<p class="pOB">
								<span>Испонитель:</span> Группа Икс
								</p>
								<ul class="listChat1">
									<li>Иванов Петр Иванович</li>
									<li>Сергей Пенкин</li>
									<li>Александ Смирнов</li>
									<li>Иванов Петр</li>
								</ul>
								<p class="pOB">
									<span>Чаты:</span> Иванов, Петров, Пенкин
								</p>
								<a href="javascript:void(0)" class="linkChat11">
									<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
									Полное описание заказа
								</a>
							</div>
						</div>
						<div class="orderBlock box-sizing">
						<span class="dimovChat"></span>
							<p class="titleOB">
								Дизай-проект квартиры на набережной 200 m2
							</p>
							<div class="hideOBB">
								<p class="pOB">
								<span>Испонитель:</span> Группа Икс
								</p>
								<ul class="listChat1">
									<li>Иванов Петр Иванович</li>
									<li>Сергей Пенкин</li>
									<li>Александ Смирнов</li>
									<li>Иванов Петр</li>
								</ul>
								<p class="pOB">
									<span>Чаты:</span> Иванов, Петров, Пенкин
								</p>
								<a href="javascript:void(0)" class="linkChat11">
									<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
									Полное описание заказа
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 commChat">
					<div class="col-lg-12 insetCommChat">
						<div class="topCommChat">
							<p class="nameCommChat">
								Иванов Петр Иванович
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat">
						<div class="topCommChat">
							<p class="nameCommChat">
								Иванов Петр Иванович
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						</p>
					</div>
					<textarea id="chat" class="box-sizing"></textarea>
					<div class="bunChat">
						<div class="setChat box-sizing">
							<p>Прикрепить файл</p>
							<span>
								Не более 10 файлов с общим объемом 500мб
							</span>
						</div>
						<a href="javascript:void(0)">отправить</a>
					</div>
				</div>
				<div class="col-lg-3 wrChat1">
					<div class="messageBlock box-sizing disTab">
						<p>Контакты</p>
						<div class="message">
							<div class="imgMess">
								<img src="img/mess.png" alt="mess-image">
							</div>
							<p class="nameMess">
								<a href="#">Иванов Петр Иванович</a>
							</p>
							<a href="javascript:void(0)" class="conMess">Контакты</a>
						</div>
					</div>
					<div class="col-lg-12 startChat">
						<div class="insetSC1">
							Начало:
							<span>Срок сдачи:</span>
						</div>
						<div class="insetSC2">
							13.0.2016
							<span>13.0.2016</span>
						</div>
					</div>
					<div class="col-lg-12 documentsChat">
						<p>Входящие документы</p>
						<ul>
							<li>
								Архитерурное 2.jpg
								<span>7мб</span>
								<div></div>
							</li>
							<li>
								Архитерурное 2.jpg
								<span>7мб</span>
								<div></div>
							</li>
							<li>
								Архитерурное 2.jpg
								<span>7мб</span>
								<div></div>
							</li>
						</ul>
						<a href="javascript:void(0)">
							Распечатать с помощью ресурса
						</a>
					</div>
					<div class="textAreaBlock2 box-sizing disTab">
						<p>Для заметок</p>
						<textarea id="chat2"></textarea>
						<a href="javascript:void()">сохранить</a>
					</div>
					<div class="closeChat closeChat1">
						<a href="javascript:void(0)">
							Закрыть проект<br>и оставить отзыв
						</a>
					</div>
					<div class="closeChat closeChat2">
						<a href="javascript:void(0)">
							Закрыть проект<br>и оставить отзыв
						</a>
					</div>
				</div>
			</div>
			<div class="chatBlock disTab tab-pane fade" id="tab2">
				<div class="col-lg-3 wrMessages">
					<div class="messageBlock box-sizing disTab">
						<p>Контакты</p>
						<div class="message messd">
							<div class="imgMess">
								<img src="img/mess.png" alt="mess-image">
							</div>
							<p class="nameMess">
								<a href="#">Иванов Петр Иванович</a>
							</p>
							<a href="javascript:void(0)" class="conMess">Контакты</a>
							<span>17</span>
							<a href="javascript:void(0)" class="deleteMess">
								Удалить контакт
							</a>
						</div>
						<div class="message messd">
							<div class="imgMess">
								<img src="img/mess.png" alt="mess-image">
							</div>
							<p class="nameMess">
								<a href="#">Иванов Петр Иванович</a>
							</p>
							<a href="javascript:void(0)" class="conMess">Контакты</a>
							<span>17</span>
							<a href="javascript:void(0)" class="deleteMess">
								Удалить контакт
							</a>
						</div>
						<div class="message messd">
							<div class="imgMess">
								<img src="img/mess.png" alt="mess-image">
							</div>
							<p class="nameMess">
								<a href="#">Иванов Петр Иванович</a>
							</p>
							<a href="javascript:void(0)" class="conMess">Контакты</a>
							<span>17</span>
							<a href="javascript:void(0)" class="deleteMess">
								Удалить контакт
							</a>
						</div>
					</div>
				</div>
				<div class="col-lg-6 commChat">
					<div class="col-lg-12 insetCommChat">
						<div class="topCommChat">
							<p class="nameCommChat">
								Иванов Петр Иванович
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat">
						<div class="topCommChat">
							<p class="nameCommChat">
								Иванов Петр Иванович
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						</p>
					</div>
					<textarea id="chat" class="box-sizing"></textarea>
					<div class="bunChat">
						<div class="setChat box-sizing">
							<p>Прикрепить файл</p>
							<span>
								Не более 10 файлов с общим объемом 500мб
							</span>
						</div>
						<a href="javascript:void(0)">отправить</a>
					</div>
				</div>
				<div class="col-lg-3 wrTAB">
					<div class="textAreaBlock2 box-sizing disTab">
						<p>Для заметок</p>
						<textarea id="chat2" ></textarea>
						<a href="javascript:void()">сохранить</a>
					</div>
					<div class="linkChatB box-sizing disTab">
						<a href="javascript:void(0)">предложить проект</a>
					</div>
				</div>
			</div>
			<div class="chatBlock disTab tab-pane fade" id="tab3">
				<div class="col-lg-3 wrMessages">
					<div class="messageBlock box-sizing disTab">
						<p>Заказы</p>
						<div class="orderBlock box-sizing orAct">
						<span class="dimovChat"></span>
							<p class="titleOB">
								Дизай-проект квартиры на набережной 200 m2
							</p>
							<div class="hideOBB disTab">
								<p class="pOB">
								<span>Заказчик:</span> Группа Икс
								</p>
								<ul class="listChat1">
									<li>Иванов Петр Иванович</li>
									<li>Сергей Пенкин</li>
								</ul>
								<a href="javascript:void(0)" class="linkChat11">
									<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
									Полное описание заказа
								</a>
							</div>
						</div>
						<div class="orderBlock box-sizing">
						<span class="dimovChat"></span>
							<p class="titleOB">
								Дизай-проект квартиры на набережной 200 m2
							</p>
							<div class="hideOBB disTab">
								<p class="pOB">
								<span>Заказчик:</span> Группа Икс
								</p>
								<ul class="listChat1">
									<li>Иванов Петр Иванович</li>
									<li>Сергей Пенкин</li>
								</ul>
								<a href="javascript:void(0)" class="linkChat11">
									<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
									Полное описание заказа
								</a>
							</div>
						</div>
						<div class="orderBlock box-sizing">
						<span class="dimovChat"></span>
							<p class="titleOB">
								Дизай-проект квартиры на набережной 200 m2
							</p>
							<div class="hideOBB disTab">
								<p class="pOB">
								<span>Заказчик:</span> Группа Икс
								</p>
								<ul class="listChat1">
									<li>Иванов Петр Иванович</li>
									<li>Сергей Пенкин</li>
								</ul>
								<a href="javascript:void(0)" class="linkChat11">
									<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
									Полное описание заказа
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 commChat">
					<div class="col-lg-12 insetCommChat">
						<div class="topCommChat">
							<p class="nameCommChat">
								Иванов Петр Иванович
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat">
						<div class="topCommChat">
							<p class="nameCommChat">
								Иванов Петр Иванович
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
						</p>
					</div>
					<div class="col-lg-12 insetCommChat youChat">
						<div class="topCommChat">
							<p class="nameCommChat greenNCC">
								Вы
							</p>
							<span>
								13.0.2016 / 21:05
							</span>
						</div>
						<p class="textCommChat">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						</p>
					</div>
					<textarea id="chat" class="box-sizing"></textarea>
					<div class="bunChat">
						<div class="setChat box-sizing">
							<p>Прикрепить файл</p>
							<span>
								Не более 10 файлов с общим объемом 500мб
							</span>
						</div>
						<a href="javascript:void(0)">отправить</a>
					</div>
				</div>
				<div class="col-lg-3 wrstepschat">
					<p>Этапы работы</p>
					<div class="stepssBlock box-sizing disTab">
						<p class="titleStepss">1 / Согласование условий</p>
						<p class="textStepss">
							Обсуджение задания и условий выполнения работы. Подтверждение заказа исполнителем.
						</p>
					</div>
					<div class="numberStepp box-sizing">
						<div class="insetNumStepp">
							<p class="titleNumStepp">
								<span>Этап 1</span>Название этапа
							</p>
							<p class="textNumStepp">
								Результаты этапа: Готовый чертеж 1
							</p>
							<div>
								<p>до 16.03.2015</p>
								<span>30 000 <i class="fa fa-rub"></i></span>
							</div>
						</div>
					</div>
					<div class="numberStepp box-sizing">
						<div class="insetNumStepp">
							<p class="titleNumStepp">
								<span>Этап 2</span>Название этапа
							</p>
							<p class="textNumStepp">
								Результаты этапа: Готовый чертеж 1
							</p>
							<div>
								<p>до 16.03.2015</p>
								<span>30 000 <i class="fa fa-rub"></i></span>
							</div>
						</div>
					</div>
					<div class="textAreaBlock2 FFD box-sizing disTab">
						<a href="javascript:void()">согласовать</a>
					</div>
					<div class="stepssBlock box-sizing disTab">
						<p class="titleStepss">2 / Резервирование</p>
						<p class="textStepss">
							Резервирование заказчиком суммы оплаты по заказ. Деньги перечисляются и хранятся на сайте.
						</p>
						<ul>
							<li>Сумма еще не зарезервирована</li>
							<li>Сумма за этап1, Зарезервирована</li>
						</ul>
					</div>
					<div class="stepssBlock box-sizing disTab">
						<p class="titleStepss">3 / Выполнение работы</p>
						<p class="textStepss">
							Процесс выполнения задания в заказе до получения заказчиком итогового результата работы.
						</p>
					</div>
				</div>
			</div>
			</div>

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