{extend name="default/base/base_home" /}

{block name="mall_main"}
<style>
  .partner-login{
    display: none;
  }
  .quick-login .mc .text{
    height: 100%;
    line-height: 1;
  }
  .dialog_title{
    height: 40px;
  }
  .clk{
    cursor: pointer;
  }
  .quick-login .mc dl dd{
    display: flex;
    align-items: center;
  }
  .quick-login .mc dl dd::after{
    display: none;
  }
  .quick-login .mc dl dd input{
    width: auto !important;
    flex: 1;
  }
  .quick-login .mc dl dd img{
    height: 36px;
  }

</style>
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/common.css">
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/semantic.min.css">
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/common.css" />
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/program.css">
<style>
  .list-banner .con2 .filter-container{
    justify-content: flex-start;
  }
  .list-banner .con2 .filter-container > div{
      flex: none;
    width: calc((100% - .5rem * 3) / 4);
  }
  @media screen and (max-width:768px){
    .list-banner .con2 .filter-container{
      justify-content: space-between;
    }
    .list-banner .con1 .img{
      display: none;
    }
    .list-banner .con1 .left{
      padding: 2rem 0;
      margin-bottom: 0;
    }
    .list-banner .con1 .left h2{
      margin-bottom: 0;
    }
    .list-banner .con2{
      padding-top: 1rem;
    }
  }
</style>
<script>
    $(document).ready(function () {
      if($(".select-wrap #selected div").text() == ""){
      sessionStorage.removeItem("flag")
    }
        $(".ui.dropdown").dropdown();
    })
</script>
<div class="list-banner">
    <div class="main-center container">
        <div class="position">Position: <a href="/">Home</a> > Programs  </div>
        <div class="content con1">
            <div class="left">
                <h2>All Programs</h2>
                <!-- <h3>所有学校</h3> -->
                <p class="mb-block" style="text-align: center;">Study abroad summer programs</p>
            </div>
            <div class="img"><img src="{$Think.HOME_SITE_ROOT}/new/images/program.png" alt="program"></div>
        </div>
        
        <hr style="height:0.5px;border:none;border-top:1px solid #E6E6FA"/>
  <!--   <div class="content con2" id="filter">
            <div class="filter-container ui form">
         {notempty name="attr_array"}
          {php}$j = 0;{/php}
          {foreach name="attr_array" item="val" key="key" }
          {php}$j++;{/php}
          {if !isset($checked_attr[$key]) && !empty($val['value']) && is_array($val['value'])}
            <div class="field">
          <label>{$val.name}</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="gender">
            <i class="dropdown icon"></i>
            <div class="default text">{$val.name}</div>
            <div class="menu">
               {php}$i = 0;{/php}
                {foreach name="$val.value" item="v" key="k" }
                {php}$i++;{/php}
                <div value="{$v.attrvalue_id}" class="item" data-value="1" >
                     {$v.attrvalue_name}
                </div>
               {/foreach}
                </div>
             </div>
            </div>
            {/if}
            {/foreach}
            {/notempty}




      </div>

            </div>-->
            <!--<div class="select-wrap">
              {if (isset($checked_brand) && is_array($checked_brand)) || (isset($checked_attr) && is_array($checked_attr))}
              <div id="selected">
                <p>You have selected:</p>
                <div>
                  {notempty name="checked_brand"}

                  {foreach name="checked_brand" item="val" key="key" }
                  <a href="{:removeParam(array('b_id' => $key))}"><span>{$Think.lang.ds_brand}:</span>{$val.brand_name}<i
                      data-uri="{:removeParam(array('b_id' => $key))}">X</i></a>
                  {/foreach}

                  {/notempty}

                  {notempty name="checked_attr"}

                  {foreach name="checked_attr" item="val"}
                  <a href="{:removeParam(array('a_id' => $val['attrvalue_id']))}"><span>{$val.attr_name}:</span>{$val.attrvalue_name}<i
                      data-uri="{:removeParam(array('b_id' => $key))}">X</i></a>
                  {/foreach}

                  {/notempty}
                </div>
              </div>
              {/if}
              <div class="submit-btn">
                <a href="javascript:;">Click on the query</a>
              </div>
          </div>

        </div>-->
    </div>

<main class="program">
    <section class="main-1">
        <div class="main-center container">
             
             {foreach name="class" item="value"}
            <div  class="link">
                <div class="con">
                    <a class="img" href="/Goods/program?gc_id={$value.gc_id}" target="_blank"><img src="/uploads/home/common/{$value.gc_image}" alt=""></a>
                    <div class="text">
                        <a href="/Goods/program?gc_id={$value.gc_id}" target="_blank"><h3><span>Program Name:</span>&nbsp;{$value.gc_name}</h3></a>
                        <a href="/Goods/program?gc_id={$value.gc_id}" target="_blank"><h3><span>Partner Institution:</span>&nbsp;{$value.pro_college}</h3></a>
                        <div class="field">
                            <div>Time:&nbsp;<span>{$value.pro_period}</span></div>
                            <div>Location:&nbsp;<span>{$value.pro_locate}</span></div>
                            <div>Type:&nbsp;<span>Study abroad</span></div>
                            <div>No. of courses:&nbsp;<span>{$value.pro_course}</span></div>
                            <div>Length:&nbsp;<span>{$value.pro_duration}</span></div>
                            <div>Popularity:&nbsp;<div class="icon-start">
                                 <div class="i-start">
                                  <div class="i">
                                    <svg class="iconf" aria-hidden="true">
                                      <use xlink:href="#icon-icon"></use>
                                    </svg>
                                    <svg class="iconf" aria-hidden="true">
                                      <use xlink:href="#icon-icon"></use>
                                    </svg>
                                    <svg class="iconf" aria-hidden="true">
                                      <use xlink:href="#icon-icon"></use>
                                    </svg>
                                    <svg class="iconf" aria-hidden="true">
                                      <use xlink:href="#icon-icon"></use>
                                    </svg>
                                    <svg class="iconf" aria-hidden="true">
                                      <use xlink:href="#icon-icon"></use>
                                    </svg>
                                  </div>
                               
                                </div>
                            </div>
                            </div>
                        </div>

                    </div>
                </div>
                <object class="link-btn">
                    <a href="/Goods/program?gc_id={$value.gc_id}" class="b">Learn more</a>
                </object>
              </div>
               {/foreach}

        </div>
    </section>
     <div class="pagination">{$show_page|raw}</div>
</main>
<script>

  if(sessionStorage.getItem("flag")){
    $(window).scrollTop($("#filter").offset().top)

  }
</script>
<script>
  // 获取参数
  function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
          return unescape(r[2]);
      };
      return null;
  }
  // 参数修改 目标url,替换参数名,替换参数值
  function changeURLArg(url,arg,arg_val){
    var pattern=arg+'=([^&]*)';
    var replaceText=arg+'='+arg_val;
    if(url.match(pattern)){
        var tmp='/('+ arg+'=)([^&]*)/gi';
        tmp=url.replace(eval(tmp),replaceText);
        return tmp;
    }else{
        if(url.match('[\?]')){
            return url+'&'+replaceText;
        }else{
            return url+'?'+replaceText;
        }
    }
}
var arr = []
$(".filter-container .menu > .item").on("click", function () {
    sessionStorage.setItem("flag", 1)
    if ($(this).attr("value") != undefined) {
      arr.push($(this).attr("value"))
    }
    $.each($(".filter-container .field"), function () {
      if ($(".filter-container .field").find(".active").length == $(".filter-container .field").length) {
        var str;
        if (getQueryString("a_id") == '0') {
          var url = window.location.href
          var str = ""
          arr.forEach((item, index) => {
            if (index === 0) {
              str += item
            } else {
              str += "_"
              str += item
            }
          });
          window.location.href = changeURLArg(url, "a_id", str)
        } else {
          if (window.location.search.indexOf("a_id") !== -1) {
            var url = window.location.href
            var str = getQueryString("a_id")
            arr.forEach((item, index) => {
              str += "_"
              str += item
            });
            window.location.href = changeURLArg(url, "a_id", str)
          } else {
            if (window.location.search == "") {
              str = "/program?a_id="
            } else {
              str = window.location.search + "&a_id="
            }
            arr.forEach((item, index) => {
              if (index === 0) {
                str += item
              } else {
                str += "_"
                str += item
              }
            });
            window.location.href = str

          }
        }
      }
    })
  })
</script>
{/block}