<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang | default "en" }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- SEO & Social Meta Tags -->
    <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title>
    <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
    <meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
    
    <!-- Open Graph -->
    <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
    <meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ .Permalink }}">
    <meta property="og:site_name" content="{{ .Site.Title }}">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
    <meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    
    <!-- Tailwind CSS -->
    <link href="/builds/app.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
</head>
<body class="bg-white text-gray-800 antialiased">
    
    <!-- Header -->
    {{ partial "header.html" . }}
    
    <!-- Breadcrumb -->
    {{ partial "breadcrumb.html" . }}
    
    <main>
        {{ block "main" . }}{{ end }}
    </main>
    
    <!-- Footer -->
    {{ partial "footer.html" . }}
    
    <!-- Scroll to top button -->
    <div class="scrolltotop icon-lg">
        <a class="button-circle button-circle-md button-circle-dark" href="#"><i class="fas fa-arrow-up"></i></a>
    </div>
    
    <!-- JavaScript -->
    <script type="module" src="/builds/app.js"></script>
</body>
</html>
