<!DOCTYPE html>
<html>
<head>
    {%include 'inc/header.html'%}
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bVe3y15p9lPq9lGbrPP71lUL"></script>
	<link href="{{static_url('css/nchome.css')}}" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <h1>{{data['info']['name']}}</h1>
        <div class="banner">
	        <img src="{{data['info']['pic']}}" width="100%">
	    </div>
        {% if data['env'] %}
	    <div class="block environment">
	    	<h2 class="block-title">农场环境<span>Farm environment</span></h2>
	    	<div class="list">
                {% for v in data['env'] %}
	    		<dl>
                    <dd><i class="icon icon-{{v['type']['key']}}"></i></dd>
                    <dt>{{v['device']['value']}}</dt>
                    <dd>{{v['name']}}( {{v['type']['unit']}} )</dd>         
                </dl>
                {% end %}
	    	</div>
	    </div>
        {% end %}
	    <div class="block introduction">
	    	<h2 class="block-title">农场介绍<span>Farm introduction</span></h2>
	    	<div class="intro-cont">
                <div id="allmap" style="float:left;width:310px;height:230px;"></div>
                <div class="txt">
                    {% raw data['info']['info'] %}
                </div>
            </div>
	    </div>

        {% if data['product'] %}
	    <div class="block products">
	    	<h2 class="block-title">农场产品<span>Farm products</span></h2>
	    	<ul>
	    		{% for v in data['product'] %}
                <li><a href="javascript:;"><img src="{{v['pic']}}" width="100%"><p>{{v['name']}}</p></a></li>
                {% end %}
            </ul>
	    </div>
        {% end %}

        <div class="block information">
            <h2 class="block-title">联系方式<span>Contact information</span></h2>
            <ul>
                <li><i class="icon icon-ct1"></i><span>农场主：{{data['info']['master_name']}}</span></li>
                <li><i class="icon icon-ct2"></i><span>电话：{{data['info']['tel']}}</span></li>
                <li><i class="icon icon-ct3"></i><span>地址：{{data['info']['address']}}</span></li>
            </ul>
        </div>
    </div>
{%include 'inc/script.html'%}
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point({{data['info']['location']}});
    map.centerAndZoom(point, 12);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    map.enableScrollWheelZoom(true);

    // 覆盖区域图层测试
    //map.addTileLayer(new BMap.PanoramaCoverageLayer());

    //var stCtrl = new BMap.PanoramaControl(); //构造全景控件
    //stCtrl.setOffset(new BMap.Size(20, 20));
    //map.addControl(stCtrl);//添加全景控件
</script>
</body>
</html>
