<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AGM Information</title>

<style>
body{
    font-family:"Segoe UI",Arial,sans-serif;
    background:#f5f7fb;
    margin:0;
    padding:40px;
    color:#333;
}
.container{max-width:900px;margin:auto;}
h1{font-size:28px;margin-bottom:25px;font-weight:600;}
.info{margin-bottom:25px;color:#555;font-size:14px;line-height:1.6;}

.card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    padding:18px 20px;
    margin-bottom:12px;
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
    transition:0.25s;
}
.card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 16px rgba(0,0,0,0.1);
}

.left{display:flex;align-items:center;}
.icon{font-size:20px;margin-right:14px;}

.text{display:flex;flex-direction:column;}
.title{font-size:15px;font-weight:500;}
.date{font-size:12px;color:#888;margin-top:3px;}

.btn{
    text-decoration:none;
    font-size:13px;
    padding:6px 14px;
    border-radius:20px;
    border:1px solid #ccc;
    color:#333;
}
.btn:hover{
    background:#007BFF;
    color:#fff;
}

.disabled{
    opacity:0.45;
    pointer-events:none;
}
</style>
</head>

<body>

<div class="container">

<h1>Annual General Meeting</h1>

<div class="info">
The AGM will be held on <b>30 April 2026 at 10:00 a.m.</b><br>
at voco Orchard Singapore, Malaysia Room Level 5, 581 Orchard Road, Singapore 238883
</div>

<div id="list"></div>

</div>

<script>
const data = [
{
    title:"Notice of AGM",
    date:"8 April 2026",
    link:"PressCenter/GTC_Notice_of_AGM_30April2026.pdf",
    icon:"📄",
    show:true
},
{
    title:"Annual Report",
    date:"8 April 2026",
    link:"PressCenter/GTC_ Annual_Report_FY2025.pdf",
    icon:"📄",
    show:true
},
{
    title:"SPM Appendix",
    date:"8 April 2026",
    link:"PressCenter/GTC_SPM_Appendix_dated_8April2026.pdf",
    icon:"📑",
    show:true
},
{
    title:"Letter to Shareholders",
    date:"8 April 2026",
    link:"PressCenter/GTC_Letter_to_Shareholders_dated_8April2026.pdf",
    icon:"📑",
    show:true
},
{
    title:"Responses to Shareholders’ Questions",
    date:"",
    link:"PressCenter/.pdf",
    icon:"💬",
    show:false
    // item.show = true;
},
{
    title:"AGM Results",
    date:"",
    link:"PressCenter/.pdf",
    icon:"📊",
    show:false
    // item.show = true;
}
];

const container = document.getElementById("list");

data.forEach(item=>{
    const visible = item.show;

    const div=document.createElement("div");
    div.className="card "+(visible?"":"disabled");

    div.innerHTML=`
    <div class="left">
        <div class="icon">${item.icon}</div>
        <div class="text">
            <div class="title">${item.title}</div>
            <div class="date">Release Date: ${item.date}</div>
        </div>
    </div>
    <a class="btn" href="${item.link}" target="_blank">View</a>
    `;

    container.appendChild(div);
});
</script>

</body>
</html>