<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Footer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
    <style>
        /* Styles from footer_style.css */

        /* Resetting margins and paddings */
        html, body {{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }}
        body {{
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Ensures footer stays at the bottom */
        }}
        .footer {{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            /* Removed background-color to inherit from parent */
            font-size: 16px;
            color: #333;
            width: 100%; /* Ensure footer is full width */
            box-sizing: border-box; /* Padding is included in the width */
        }}
        .footer > div:first-child {{
            margin-left: -20px;
            padding-left: 0; /* Adjust if necessary */
        }}
        .footer div, .footer a {{
            margin: 0 5px;
        }}
        .footer div {{
            text-align: left;
        }}
        .footer a {{
            color: {accent_color};
            transition: color 0.3s ease;
        }}
        .footer a:hover {{
            color: #50AF31;
        }}
        .foot-text {{
            text-align: center;
            width: 80%;
            margin-bottom: 15px;
            font-size: 14px;
            color: #333;
        }}
        .brand-section {{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }}
        .brand-icon a {{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: transparent; /* Ensure transparency */
            text-decoration: none !important;
            color: white;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }}
        .brand-icon i {{
            font-size: 24px;
        }}
        .brand-icon a:hover, .brand-icon a:focus {{
            background-color: {accent_color};
            transform: scale(1.1);
            text-decoration: none;
        }}
        .brand-icon a, .brand-icon a:hover, .brand-icon a:active, .brand-icon a:visited {{
            text-decoration: none;
        }}
        .build-version {{
            margin-top: 8px;
            color: white; /* Adjust as needed */
            font-size: 12px;
        }}
        /* Removed dark mode media query to let Gradio handle theming */
    </style>
</head>
<body>

<div class="footer">
    <div class="foot-text">
        <h2 style="font-weight: bold; color: {accent_color};">Disclaimer</h2>
	<p>The transcription completed by this application may contain errors.</p>
	<p>Users must take care to review transcripts before circulating to ensure that they are error-free and complete.</p>
	<p>The transcripts produced by this application do not replace a court reporter's transcription. The transcripts completed by this application are for the user's convenience only.</p>
        <h2 style="font-weight: bold; color: {accent_color};">Data retention</h2>
	<p>Audio or video files uploaded to this application are only retained for the time that it takes to complete the transcription. All transcripts are deleted after they are transmitted to the user.</p>
    </div>
    <div class="brand-section">
        <div class="brand-icon">
            <a href="https://apstrom.ca" aria-label="A.P.Strom">
                <i class="fas fa-globe"></i>
            </a>
        </div>
    </div>
    <div class="build-version">Build-Version: {footer_scraibe_webui_version}</div>
</div>

</body>
</html>
