{{ define "main" }}

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


<div class="page-wrapper">
    <div class="container mb-5">
        <div class="row" style="padding-top:60px;">
            <div class="col-md-10 mx-auto">
              <h1 class="post-title mb-5">{{ .Title }}</h1>
            </div>
        </div>
        
        <!-- 手機版 -->
        <div class="d-block d-md-none">
            <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="style ms-1" type="radio" id="m_風格不限" name="m_style" value="所有風格" checked/>
                            <label for="m_風格不限">不限</label>   
                      
                            <input class="style ms-1" type="radio" id="m_北歐風" name="m_style"  value="北歐風" />
                            <label for="m_北歐風">北歐風</label>
                     
                            <input class="style ms-1" type="radio" id="m_現代風" name="m_style" value="現代風" />
                            <label for="m_現代風">現代風</label>
                     
                            <input class="style ms-1" type="radio" id="m_日式風" name="m_style"  value="日式風" />
                            <label for="m_日式風">日式風</label>
                     
                            <input class="style ms-1" type="radio" id="m_工業風" name="m_style"  value="工業風" />
                            <label for="m_工業風">工業風</label>
                     
                            <input class="style ms-1" type="radio" id="m_混搭風" name="m_style" value="混搭風" />
                            <label for="m_混搭風">混搭風</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="roomsize ms-1" type="radio" id="m_坪數不限" name="m_roomsize" value="所有坪數" checked/>
                            <label for="m_坪數不限">不限</label>    
                        
                            <input class="roomsize ms-1" type="radio" id="m_10~20坪" name="m_roomsize" value="10~20坪" />
                            <label for="m_10~20坪">10~20坪</label>    
                        
                            <input class="roomsize ms-1" type="radio" id="m_21~30坪" name="m_roomsize" value="21~30坪" />
                            <label for="m_21~30坪">21~30坪</label>    
                        
                            <input class="roomsize ms-1" type="radio" id="m_31~40坪" name="m_roomsize" value="31~40坪" />
                            <label for="m_31~40坪">31~40坪</label>    
                        
                            <input class="roomsize ms-1" type="radio" id="m_41~50坪" name="m_roomsize" value="41~50坪" />
                            <label for="m_41~50坪">41~50坪</label>    
                        
                            <input class="roomsize ms-1" type="radio" id="m_51坪以上" name="m_roomsize" value="51坪以上" />
                            <label for="m_51坪以上">51坪以上</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="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_35萬以下" name="m_budget" value="35萬以下" />
                            <label for="m_35萬以下">35萬以下</label>    
                        
                            <input class="budget ms-1" type="radio" id="m_36~50萬" name="m_budget" value="36~50萬" />
                            <label for="m_36~50萬">36~50萬</label>    
                      
                            <input class="budget ms-1" type="radio" id="m_51~70萬" name="m_budget" value="51~70萬" />
                            <label for="m_51~70萬">51~70萬</label>    
                        
                            <input class="budget ms-1" type="radio" id="m_70~99萬" name="m_budget" value="70~99萬" />
                            <label for="m_70~99萬">70~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>
                <div class="col-md-9">
                    <!-- 更新內容區塊 -->
                    <div class="row row-cols-1 row-cols-sm-3">
                        {{ $paginator := .Paginate .Data.Pages }}
                        {{ range $paginator.Pages }}
                        <div class="col">                
                            <div class="card h-100">
                                <a href="{{ .Permalink }}" style="color:#444444;">
                                    <img src="{{ .Params.Image | relURL }}" class="card-img-top" alt="{{ .Title }}">
                                </a>
                                <div class="card-body">
                                    <a href="{{ .Permalink }}" style="color:#444444;">
                                        <h3 class="card-title"><b>{{ .Title }}</b></h3>
                                    </a>
                                    <p class="card-text">{{ .Description }}</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="style ms-1" type="radio" id="風格不限" name="style" value="風格不限" checked/>
                            <label for="風格不限">不限</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="style ms-1" type="radio" id="北歐風" name="style" value="北歐風" />
                            <label for="北歐風">北歐風</label>
                        </div>                                                    
                        <div class="list-group-item list-group-item-action">
                            <input class="style ms-1" type="radio" id="現代風" name="style" value="現代風" />
                            <label for="現代風">現代風</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="style ms-1" type="radio" id="日式風" name="style"  value="日式風"/>
                            <label for="日式風">日式風</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="style ms-1" type="radio" id="工業風" name="style"  value="工業風"/>
                            <label for="工業風">工業風</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="style ms-1" type="radio" id="混搭風" name="style" 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="roomsize ms-1" type="radio" id="坪數不限" name="roomsize" value="坪數不限" checked/>
                            <label for="坪數不限">不限</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="roomsize ms-1" type="radio" id="10~20坪" name="roomsize" value="10~20坪" />
                            <label for="10~20坪">10~20坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="roomsize ms-1" type="radio" id="21~30坪" name="roomsize" value="21~30坪" />
                            <label for="21~30坪">21~30坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="roomsize ms-1" type="radio" id="31~40坪" name="roomsize" value="31~40坪" />
                            <label for="31~40坪">31~40坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="roomsize ms-1" type="radio" id="41~50坪" name="roomsize" value="41~50坪" />
                            <label for="41~50坪">41~50坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="roomsize ms-1" type="radio" id="51坪以上" name="roomsize" value="51坪以上" />
                            <label for="51坪以上">51坪以上</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="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="35萬以下" name="budget" value="35萬以下" />
                            <label for="35萬以下">35萬以下</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="36~50萬" name="budget" value="36~50萬" />
                            <label for="36~50萬">36~50萬</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="51~70萬" name="budget" value="51~70萬" />
                            <label for="51~70萬">51~70萬</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="70~99萬" name="budget" value="70~99萬" />
                            <label for="70~99萬">70~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>
                <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 href="{{ .Permalink }}" target="_blank">
                                    <img src="{{ .Params.Image | relURL }}" class="card-img-top" alt="{{ .Title }}">
                                </a>
                                <div class="card-body">
                                    <a href="{{ .Permalink }}" target="_blank">
                                        <h3 class="card-title"><b>{{ .Title }}</b></h3>
                                    </a>
                                    <p class="card-text">{{ .Description }}</p>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>









</amp-script>  

{{ end }}