{{ define "main" }}

<amp-script layout="container" height="4096" src="/js/cz_filter.js">

<div class="page-wrapper">
    <div class="container mb-5">
        <section class="section15" style="padding-top:60px;">
            <div class="text-center mb-4">
                <div class="title"><b>{{ .Title }}</b></div>
            </div>
        </section>
        
        <!-- 手機版 -->
        <div class="d-block d-md-none">
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            屋型
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="type ms-1" type="radio" id="m_全部屋型" name="m_type" value="全部屋型" checked/>
                            <label for="m_全部屋型">全部</label>   
                      
                            <input class="type ms-1" type="radio" id="m_透天" name="m_type"  value="透天" />
                            <label for="m_透天">透天</label>
                     
                            <input class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
                            <label for="m_大樓">大樓</label>
                        </div>
                    </div>
                    <div class="mb-3 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            坪數
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked/>
                            <label for="m_全部坪數">全部</label>    
                        
                            <input class="ping ms-1" type="radio" id="m_19坪以下" name="m_ping" value="19坪以下" />
                            <label for="m_19坪以下">19坪以下</label>    
                        
                            <input class="ping ms-1" type="radio" id="m_20-29坪" name="m_ping" value="20-29坪" />
                            <label for="m_20-29坪">20-29坪</label>    
                        
                            <input class="ping ms-1" type="radio" id="m_30-39坪" name="m_ping" value="30-39坪" />
                            <label for="m_30-39坪">30-39坪</label>    
                        
                            <input class="ping ms-1" type="radio" id="m_40坪以上" name="m_ping" value="40坪以上" />
                            <label for="m_40坪以上">40坪以上</label>
                        </div>
                    </div>
                    <div class="mb-3 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            預算
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算" checked/>
                            <label for="m_全部預算">全部</label>    
                        
                            <input class="budget ms-1" type="radio" id="m_45-59萬" name="m_budget" value="45-59萬" />
                            <label for="m_45-59萬">45-59萬</label>    
                        
                            <input class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
                            <label for="m_60-79萬">60-79萬</label>    
                        
                            <input class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
                            <label for="m_80-99萬">80-99萬</label>    
                        
                            <input class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
                            <label for="m_100萬以上">100萬以上</label>
                        </div>
                    </div>
                    <div class="list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            格局
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked/>
                            <label for="m_全部格局">全部</label>    
                       
                            <input class="rooms ms-1" type="radio" id="m_兩房" name="m_rooms" value="兩房" />
                            <label for="m_兩房">兩房</label>    
                        
                            <input class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
                            <label for="m_三房">三房</label>    
                      
                            <input class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
                            <label for="m_四房">四房</label>    
                        
                            <input class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
                            <label for="m_四房以上">四房以上</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="update_info row row-cols-1 row-cols-sm-3">
                        {{ $paginator := .Paginate .Data.Pages }}
                        {{ range $paginator.Pages }}
                        <div class="col">                
                            <div class="card h-100">
                                <a class="link-collection" href="{{ .RelPermalink }}">
                                    <amp-img
                                        alt="{{ .Title }}"
                                        src="{{ .Params.Image | relURL }}"
                                        height="1"
                                        width="1.4"
                                        layout="responsive">
                                    </amp-img>
                                </a>
                                <div class="card-body">
                                    <a class="link-collection" href="{{ .RelPermalink }}">
                                        <div class="title-size"><b>{{ .Title }}</b></div>
                                    </a>
                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
        <!-- 電腦版 -->
        <div class="d-none d-md-block">
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-4 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            屋型
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="type ms-1" type="radio" id="全部屋型" name="type" value="全部屋型" checked/>
                            <label for="全部屋型">全部</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="type ms-1" type="radio" id="透天" name="type" value="透天" />
                            <label for="透天">透天</label>
                        </div>                                                    
                        <div class="list-group-item list-group-item-action">
                            <input class="type ms-1" type="radio" id="大樓" name="type" value="大樓" />
                            <label for="大樓">大樓</label>
                        </div>
                    </div>
                    <div class="mb-4 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            坪數
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="全部坪數" name="ping" value="全部坪數" checked/>
                            <label for="全部坪數">全部</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="19坪以下" name="ping" value="19坪以下" />
                            <label for="19坪以下">19坪以下</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="20-29坪" name="ping" value="20-29坪" />
                            <label for="20-29坪">20-29坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="30-39坪" name="ping" value="30-39坪" />
                            <label for="30-39坪">30-39坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="40坪以上" name="ping" value="40坪以上" />
                            <label for="40坪以上">40坪以上</label>    
                        </div>
                    </div>
                    <div class="mb-4 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            預算
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="全部預算" name="budget" value="全部預算" checked/>
                            <label for="全部預算">全部</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="45-59萬" name="budget" value="45-59萬" />
                            <label for="45-59萬">45-59萬</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="60-79萬" name="budget" value="60-79萬" />
                            <label for="60-79萬">60-79萬</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="80-99萬" name="budget" value="80-99萬" />
                            <label for="80-99萬">80-99萬</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="100萬以上" name="budget" value="100萬以上" />
                            <label for="100萬以上">100萬以上</label>
                        </div>
                    </div>
                    <div class="list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            格局
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="全部格局" name="rooms" value="全部格局" checked/>
                            <label for="全部格局">全部</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="兩房" name="rooms" value="兩房" />
                            <label for="兩房">兩房</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="三房" name="rooms" value="三房" />
                            <label for="三房">三房</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="四房" name="rooms" value="四房" />
                            <label for="四房">四房</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="四房以上" name="rooms" value="四房以上" />
                            <label for="四房以上">四房以上</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <!-- 更新內容區塊 -->
                    <div class="update_info row row-cols-1 row-cols-sm-3">
                        {{ $paginator := .Paginate .Data.Pages }}
                        {{ range $paginator.Pages }}
                        <div class="col">                
                            <div class="card h-100">
                                <a class="link-collection" href="{{ .RelPermalink }}">
                                    <amp-img
                                        alt="{{ .Title }}"
                                        src="{{ .Params.Image | relURL }}"
                                        height="1"
                                        width="1.4"
                                        layout="responsive">
                                    </amp-img>
                                </a>
                                <div class="card-body">
                                    <a class="link-collection" href="{{ .RelPermalink }}">
                                        <div class="title-size"><b>{{ .Title }}</b></div>
                                    </a>
                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</amp-script>

{{ end }}