{{template "base/head_home" .}}
<style>
  .notice-container {
  
  }
  .notice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    border-bottom: 1px solid rgba(157, 197, 226, 0.2);
    padding: 0 16px;
  }
  .notice-title {
    flex: 1;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .notice-title a {    
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
  .notice-title a:hover {
    opacity: 0.8;
  }
  .notice-time {
    width: 150px;
    text-align: right;    
    font-size: 14px;
    color: rgba(16, 16, 16, 0.6);
  }
</style>
<div class="ui container">
  <h3 class="ui center am-pt-30 am-pb-20">{{.i18n.Tr "notice_announcement"}}</h3>
  <div class="notice-container">
  </div>
</div>
{{template "base/footer" .}}
<script>
  ;(function() {    
    var isZh = document.documentElement.getAttribute('lang') == 'zh-CN';
    function getNotice() {
      $.ajax({
        type:"GET",
        url:"/dashboard/invitation",
        dataType:"json",
        data: {
          filename: 'notice/notice.json',
        },
        success:function(data){
          if (!data) return;
          try {
            var noticeList = JSON.parse(data).Notices || [];
            var noticeEl = $('.notice-container');
            for (var i = 0, iLen = noticeList.length; i < iLen; i++) {              
              var noticeObj = noticeList[i];
              noticeEl.append(`<div class="notice-row">
                <div class="notice-title">
                   <a class="_hm-notice" href="${noticeObj.Link}">
                    <i class="ri-arrow-right-s-line" style="vertical-align:-2px;"></i>
                    <span>${isZh ? noticeObj.Title : (noticeObj.Title_en || noticeObj.Title)}</span>
                  </a>
                </div>
                <div class="notice-time">${noticeObj.Date || ''}</div>
              </div>`);              
            }
          } catch (e) {
            console.info(e);
          }
        },
        error:function(err) {
          console.info(err);
        }
      });
    }
    getNotice();
  })();
</script>