{extend name="default/base/base_home" /}
{block name="mall_main"}
<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/course.css">

<style>
.main-1{
    max-width: 1200px;
    margin: 0 auto;
}
.main-title h2{
    font-size: 2.3rem;
}
.main-title p a{
   color: #0536F9;
}
.succlist{
       margin-top:5rem;
}
.succtitle{
    font-size:0.9rem;
    font-weight: bold;
    color: #000000;
}
.succtitle span{
    font-size:0.9rem;
    font-family:'robotoLight'!important;
    font-weight: 300;
    color: #000000;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    main .main-1 {
      max-width: 50rem;
    }
}
@media screen and (max-width: 820px) {
    main .main-1 {
      max-width: 50rem;
    }
}
@media screen and (max-width: 768px) {
    main .main-1 {
      max-width: 50rem;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    main .main-1 {
      max-width: 50rem;
    }
}
.succtable{
    background: #FFFFFF;
    box-shadow: 0px 3px 20px 1px rgba(41, 41, 41, 0.18);
    padding: 1rem 1rem 1rem 1rem;
    margin-top: 1rem;
    overflow-x: scroll;
}
.thed{
    display: flex;
    justify-content: start;
    align-items: center;
    border-bottom: 1px solid #8C8C8C;
    padding: 1rem 0 1rem 0;
    min-width:40rem;
}
.thed>div{
     font-size: 0.8rem;
    font-weight: 400;
    color: #484848;
    font-family:'robotoLight'!important;  
}
.thbody{
    display: flex;
    justify-content: start;
    align-items: center;
    border-bottom: 1px solid #8C8C8C;
    padding: 1rem 0 1rem 0;
    min-width:40rem;
    
}
.thbody .td1{font-size:1.2rem;font-weight: 900;color:#010101;}
.thbody .td2>div:nth-of-type(1){font-size:0.9rem;font-weight:500;color:#010101;}
.thbody .td2>div:nth-of-type(2){font-size:0.8rem;font-weight:300;color:#010101;font-family:'robotoLight'!important;  }
.thbody .td3{font-size:1.2rem;font-weight: 500;color:#010101;}
.thbody .td4>div:nth-of-type(1){font-size:0.9rem;font-weight:500;color:#010101;}
.thbody .td4>div:nth-of-type(2){font-size:0.8rem;font-weight:300;color:#010101;font-family:'robotoLight'!important;}
.thbody .td5>div{font-size:0.9rem;font-weight:400;color:#404040;font-family:'robotoLight'!important; }
.thbody .td5>div span{font-size:0.9rem;font-weight:400;color:#404040;}
.thbody .td6{font-size:1.2rem;font-weight:500;color:#000000;}
.td1{width:12%;} 
.td2{width:26%;}
.td3{width:12%;}
.td4{width:20%;}
.td5{width:22%;}
.td6{width:8%;}
.trips{
    font-size:0.9rem;
    font-weight: 400;
    color: #5A5A5A;
    font-family:'robotoLight'!important;
    margin-top: 1rem;
}
.goto{
    font-size:0.9rem;
    font-weight: 400;
    color: #0E0E0E;
    margin-top:5rem;
    text-align: right;
}
.goto a{
    font-size:0.9rem;
    font-weight: 400;
    color: #0536F9;
}
</style>
<main>
    <section class="main-1">
     <div class="main-title">
      <h2>Your payment has been processed!</h2>
      <p>To monitor your course's progress or move on to the next phase, click the button below to go to the
      <a href="/Membercourse/index.html">My Courses</a> page.</p>
     </div>
     <div class="succlist">
         <div class="succtitle">Order Number <span>{$number}</span></div>
         <div class="succtable">
              <div class="thed">
                 <div class="td1">Host Institution</div>
                 <div class="td2">Course Code & Title</div>
                 <div class="td3">Credit(s)</div>
                 <div class="td4">Mode of Instruction</div>
                 <div class="td5">Session Date</div>
                 <div class="td6">Pricing</div>
              </div>
              
                 {notempty name="tmp"}
                  {foreach name="tmp"  item="value"}
              <div class="thbody">
                 <div class="td1">{$value.ke_simple_college}</div>
                 <div class="td2">
                     <div>{$value.goods_serial}</div>
                     <div>{$value.goods_name}</div>
                 </div>
                 <div class="td3">4</div>
                 <div class="td4">
                     <div>Online</div>
                     <div>{$value.ke_institution}</div>
                 </div>
                 <div class="td5">
                     <div>Start Date:<span>{$value.ke_start_time}</span></div>
                 </div>
                 <div class="td6">{$value.goods_price}</div>
              </div>
               {/foreach}
              {/notempty}
              
         </div>
         <div class="trips">*You can save the information on the current page by taking a screenshot.</div>
         <div class="goto">
             Go to  <a href="/Membercourse/index.html">My Courses</a>
         </div>
         
     </div>
    </section>     
</main>
 


{/block}