<!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('mobile/css/farm.css')}}" rel="stylesheet">
</head>
<body>
    <h1 class="h1">{{data['info']['name']}}</h1>
    <section class="banner">
        <img src="{{data['info']['pic']}}" width="100%">
    </section>
    {% if data['env'] %}
    <section class="m-wrapper">
        <h2>农场环境 <p>Farm environment</p> </h2>
        <section class="environment">
            {% 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 %}
        </section>
    </section>
    {% end %}

    <section class="m-wrapper introduction">
        <h2>农场介绍 <p>Farm introduction</p> </h2>
        {% raw data['info']['info'] %}
        <a href="#" style="display: none;" class="more">点击查看更多</a>
    </section>
    
    {% if data['info']['location'] %}
    <section class="m-wrapper">
        <h2>地理位置 <p>geographical position</p> </h2>
        <section class="img-wrap" id="allmap" style="height:230px;">
        </section>
    </section>
    {% end %}

    {% if data['product'] %}
    <section class="m-wrapper">
        <h2>农场产品 <p>Farm products</p> </h2>
        <section class="li-1">
            {% for v in data['product'] %}
            <dl>
                <dt><img src="{{v['pic']}}" width="100%"></dt>
                <dd>{{v['name']}}</dd>
            </dl>
            {% end %}
        </section>
    </section>
    {% end %}

    <section class="m-wrapper contact">
        <h2>联系方式 <p>Contact information</p> </h2>
        <section >
            <dl>
                <dt><i class="icon icon-ct1"></i></dt>
                <dd>农场主：{{data['info']['master_name']}}</dd>
            </dl>
            <dl>
                <dt><i class="icon icon-ct2"></i></dt>
                <dd><a href="tel://400-123-1234">电话：{{data['info']['tel']}}</a></dd>
            </dl>
        </section>
    </section>

{%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);
</script>
</body>
</html>
