{% extends "base.html" %}
{% block title %}View Contract - {{ employee.employee_name }}{% endblock %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/contract.css') }}" />
<div class="container mt-4">
    <!-- Header -->
    <div class="text-center mb-3">
        <h3>Employee Contract Preview - {{ employee.employee_name }}</h3>
    </div>
    <!-- Buttons -->
    <div class="d-flex justify-content-center align-items-center mb-4 gap-3">
        <a href="{{ url_for('employees.download_docx', id=employee.id) }}" class="btn btn-success">
            <i class="bx bx-download"></i> Download DOCX
        </a>
        <a href="{{ url_for('employees.index') }}" class="btn btn-secondary">
            <i class="bx bx-arrow-back"></i> Back to List
        </a>
    </div>
    <!-- DOCX Preview Card -->
    <div class="d-flex justify-content-center">
        <div class="container-card shadow-sm p-5 mb-3" style="font-family: Calibri, sans-serif; max-width: 800px; background-color: #fff;">
            <!-- DOCX converted HTML content -->
            <div class="docx-preview">
                {{ html_content|safe }}
            </div>
        </div>
    </div>
</div>
<style>
/* DOCX Preview Styling */
.docx-preview {
    white-space: pre-wrap;
    font-size: 1rem;
    color: #333;
}
/* Center headings */
.docx-preview h1,
.docx-preview h2,
.docx-preview h3 {
    text-align: center;
    font-weight: bold;
}
/* Paragraphs spacing */
.docx-preview p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
/* Table styling */
.docx-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.docx-preview table,
.docx-preview th,
.docx-preview td {
    border: 1px solid #ddd;
    padding: 8px;
}
.docx-preview th {
    background-color: #f2f2f2;
    font-weight: bold;
}
/* Optional bolder border class */
.bolder {
    border: 1px solid #6e6e6eff;
}
</style>
{% endblock %}