{% extends "base.html" %}
{% load staticfiles %}
{% block bodyclasses %}{{ block.super }} two-sidebars blog blog-details{% endblock %}
{% block othercss %}
<link rel="stylesheet" href="{% static "stylesheets/sass/blog.css" %}">
{% endblock %}
{% block sidebar_first %}
<aside id="sidebar-first" class="region-sidebar-first">
	{% include "sciblog/nav-ribbon.html" %}
	<div class="post-question">
	  {% include "sciblog/blog_search_form.html" %}
	</div>	
	<div class="related-questions">
		<h3>关联问题</h3>
		{% for query in blog.query.all %}
		<div><a href="{% url query_blogs %}?q={{ query.content }}" title="查询与此问题相关的文章">{{ query.content }}</a></div>
		{% endfor %}
	</div>
	<div class="toc">
		<h3 class="toc-title">目&emsp;录</h3>
		<ul class="links">
			<li class="{% if blockid == 'source' %}active{% endif %}">
				<a href="{% url blog_detail blog.id 'source'%}">文章来源</a>
			</li>
			<li class="{% if blockid == 'abstract' %}active{% endif %}">
				<a href="{% url blog_detail blog.id 'abstract'%}">文章简读</a>
			</li>
			<li class="{% if blockid == 'knowledge' %}active{% endif %}">
				<a href="{% url blog_detail blog.id 'knowledge'%}">科普扫盲</a>
			</li>
			<li class="{% if blockid == 'follow' %}active{% endif %}">
				<a href="{% url blog_detail blog.id 'follow'%}">随访与用药</a>
			</li>
			<li class="{% if blockid == 'results' %}active{% endif %}">
				<a href="{% url blog_detail blog.id 'results'%}">治疗结果</a>
			</li>
			<li class="{% if blockid == 'comment' %}active{% endif %}">
				<a href="{% url blog_detail blog.id 'comment'%}">学者科学评论</a>
			</li>
			<li class="{% if blockid == 'refrences' %}active{% endif %}">
				<a href="{% url blog_detail blog.id 'refrences'%}">参考信息</a>
			</li>
		</ul>
	</div>
	<header id="header">
		<div id="logo">
			<img src="{% static "images/slilogo.png" %}" alt="">
		</div>
	</header>
</aside>
{% endblock %}
{% block sidebar_second %}
<aside id="sidebar-second" class="region-sidebar-second">
	{% include "login-menu.inc.html" %}
	<nav class="social">
		<!-- Below are CSS-worthy structures. Styling incomplete, but you may start filling data -->
		<ul class="buttons inline">
			<li>
			  <button class="multi-segment-button action-button grey-button" id="like-button" title="收藏整篇文章" target-url="{% url blog_collect blog.id %}">
				  {% if collected %}
					<div class="segment first like-button deaction">&emsp;&nbsp;收藏</div>
					<div class="segment first unlike-button action">不收藏</div>
			      {% else %}
					<div class="segment first like-button action">&emsp;&nbsp;收藏</div>
					<div class="segment first unlike-button deaction">不收藏</div>
				  {% endif %}
					<div class="segment last count">{{ blog.collected_by.count }}</div>
				</button>
			</li>
			<li>
				<button class="multi-segment-button action-button" id="no-idea-button" title="看不懂这篇文章" target-url="{% url blog_understood blog.id %}">
				  {% if understood %}
					<div class="segment first no-idea-button action">&emsp;&nbsp;不懂</div>
					<div class="segment first idea-button deaction">看懂了</div>
			      {% else %}
					<div class="segment first no-idea-button deaction">&emsp;&nbsp;不懂</div>
					<div class="segment first idea-button action">看懂了</div>
			      {% endif %}
					<div class="segment last count">{{ blog.catched_by.count }}</div>
				</button>
			</li>
		</ul>
	</nav>
	<div id="card-abstract"></div>
	<div class="lists-container">
		<nav class="comments expandable expanded" data-expand-group-selector="#sidebar-second .lists-container nav">
			<h4 class="expand-heading">段落注释</h4>
			<ol class="expand-container jargon-links" id="paracomments-list">
			</ol>
		</nav>
		<nav class="jargon-list expandable" data-expand-group-selector="#sidebar-second .lists-container nav">
			<h4 class="expand-heading">专业名词</h4>
			<ul class="expand-container jargon-links" id="propernouns-list">
			</ul>
		</nav>
	</div>
</aside>
{% endblock %}
{% block before_content %}
<section id="blog-top-nav" class="blog-top-nav content">
	<div class="region-wrap">
		<div class="background"></div>
		<div class="breadcrumb">
			<ul class="links inline">
				<!--li><a href="" class="button dark-grey-button first">更多文章</a></li-->
				<li><a id="return-to-results-button" href="{% url blog_detail blog.id 'results'%}" class="button dark-grey-button">返回治疗结果</a></li>
			</ul>
		</div>
		<h1 class="blog-title">{{ blog.subhead }}</h1>
		<h2 class="section-name">{% block sectionname %}临床策略{% endblock %}</h2>
		<!-- if firstSection -->
		{% block navigation %}
		<nav role="navigation" class="section-nav">
			<ul class="links inline">
				<li><a href="#methods" class="active">治疗手段</a></li>
				<li><a href="#objectives">目标</a></li>
				<li><a href="">结果简述</a></li>
				<li><a href="">副作用</a></li>
				<li><a href="">本文结论</a></li>
			</ul>
		</nav>
		{% endblock %}
		<!-- endif -->
	</div>
</section>
{% endblock %}
{% block body %}
	<!-- if not cards -->
	<div class="text jargons">
	{% autoescape off %}
	{% block block_pieces %}
	{% endblock %}
	{% endautoescape %}
	{% block explanations %}
		<div class="jargon-explanations">
			<div class="jargon-explanation" data-key="">
				<h3 class="name"></h3>
				<div class="jargon-details">
				</div>
			</div>
		</div>
	{% endblock %}
		<div class="page-expand"></div>
	</div>
	<div class="jargon-explanation-box">
		<div class="text-pointer"></div>
		<div class="close-box"></div>
		<img src="{% static "images/loading.gif" %}" alt="" class="loading-image">
		<div class="content-wrap">
		  <h3 class="name"></h3>
		  <div class="jargon-details"></div>
		</div>
		{% if user.is_authenticated %}
		<a class="button like-button grey-button collect"><img src="{% static "images/grey-heart.png" %}" alt="">收藏该条注释</a>
		{% else %}
		<div class="button like-button disabled grey-button" disabled="disabled"><a href="{% url login %}?next={{ request.path }}" class="login-button">登陆</a>97随访网站搜索此条目</div>
		{% endif %}
	</div>
	<!-- else -->
	<!-- for ... -->
	<div id="back-to-top-button" title="返回顶部"></div>
	<div id="related-questions-confirm" class="dialog-content confirm-dialog">
		<p>我们将要帮您重新搜索医学文章，会离开本文页面，您确定吗？</p>
		<div class="controls">
			<button class="dialog-ok">确认</button>
			&nbsp;
			<button class="dialog-cancel grey-button">取消</button>
		</div>
	</div>
	<div id="like-button-login-confirm" class="dialog-content confirm-dialog">
		<p>需要登陆才能够收藏文章。但这将离开此页面，确定离开？</p>
		<div class="controls">
			<button class="dialog-ok">确认</button>
			&nbsp;
			<button class="dialog-cancel grey-button">取消</button>
		</div>
	</div>
	<div id="no-idea-button-login-confirm" class="dialog-content confirm-dialog">
		<p>需要登陆才能让我们知道您没有看懂此文。但这将离开此页面，确定离开？</p>
		<div class="controls">
			<button class="dialog-ok">确认</button>
			&nbsp;
			<button class="dialog-cancel grey-button">取消</button>
		</div>
	</div>
	<!-- endfor -->
	<!-- endif -->
{% endblock %}
{% block scripts %}
{{ block.super }}
<script type="text/javascript" src="{% static "javascripts/jargon-display.js" %}"></script>
<script type="text/javascript">
$(document).ready(function() {
	/*
	 * list all the annotations and markup the proper nouns
	 */

	  var annotations= {{ annotations|safe}};
	  jargon_display(annotations);
    })
</script>
<script type="text/javascript">
	$(function(){
		var activeUrl = null;
		$(".dialog-ok").click(function() {
			location.href = activeUrl;
		})
		$(".dialog-cancel").click(function() {
			$.modalHide();
		})
		$("#sidebar-first .related-questions a").click(function(e) {
			e.preventDefault();
			e.stopPropagation();
			activeUrl = $(this).attr('href');

			$("#related-questions-confirm").modalShow();
		})
		$("body.not-logged-in").find("#no-idea-button,#like-button").click(function(e) {
			e.preventDefault();
			e.stopPropagation();
			activeUrl = ""; // login url
			$("#" + $(this).attr('id') + "-login-confirm").modalShow();
		})
	});
  
  $(document).ready(function(){
	  $('button.action-button').click(function(){
		var button = $(this);
		var url = button.attr('target-url');
		
		$.ajax({
			url:url,
			dataType:'json',
			success: function(data) {
			  if (data.error) {
				return;
			  }
			  $('.count', button).text(data.times);
			  button.toggleClass('acted');
			}
		  });
		});
	  });
</script>
{% endblock %}