{% extends "base.html" %}
{% from "_form_helpers.html" import render_field %}

{% block content %}
<div class="px-4 py-5 my-5 text-center">
    <img class="d-block mx-auto mb-4" src="{{ url_for('static', filename='FHIRFLARE.png') }}" alt="FHIRFLARE IG Toolkit" width="192" height="192">
    <h1 class="display-5 fw-bold text-body-emphasis">FSH Converter</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">
            Convert FHIR JSON or XML resources to FHIR Shorthand (FSH) using GoFSH.
        </p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="{{ url_for('index') }}" class="btn btn-primary btn-lg px-4 gap-3">Back to Home</a>
            <a href="{{ url_for('view_igs') }}" class="btn btn-outline-secondary btn-lg px-4">View Downloaded IGs</a>
            <a href="{{ url_for('validate_sample') }}" class="btn btn-outline-secondary btn-lg px-4">Validate Sample</a>
            <a href="{{ url_for('fhir_ui_operations') }}" class="btn btn-outline-secondary btn-lg px-4">FHIR Operations</a>
        </div>
    </div>
</div>

<div class="container mt-4">
    <h2><i class="bi bi-file-code me-2"></i>Convert FHIR to FSH</h2>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data" class="form">
                        {{ form.hidden_tag() }}
                        {{ render_field(form.package) }}
                        {{ render_field(form.input_mode) }}
                        <div id="file-upload" style="display: none;">
                            {{ render_field(form.fhir_file) }}
                        </div>
                        <div id="text-input" style="display: none;">
                            {{ render_field(form.fhir_text) }}
                        </div>
                        {{ render_field(form.output_style) }}
                        {{ render_field(form.log_level) }}
                        {{ render_field(form.fhir_version) }}
                        <div class="d-grid gap-2 d-sm-flex">
                            {{ form.submit(class="btn btn-success") }}
                            <a href="{{ url_for('index') }}" class="btn btn-secondary">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% if error %}
    <div class="alert alert-danger mt-4">{{ error }}</div>
    {% endif %}
    {% if fsh_output %}
    <div class="alert alert-success mt-4">Conversion successful!</div>
    <h3 class="mt-4">FSH Output</h3>
    <pre class="bg-light p-3">{{ fsh_output }}</pre>
    <a href="{{ url_for('download_fsh') }}" class="btn btn-primary">Download FSH</a>
    {% endif %}
</div>

<script>
    document.getElementById('input_mode').addEventListener('change', function() {
        const fileUpload = document.getElementById('file-upload');
        const textInput = document.getElementById('text-input');
        if (this.value === 'file') {
            fileUpload.style.display = 'block';
            textInput.style.display = 'none';
        } else {
            fileUpload.style.display = 'none';
            textInput.style.display = 'block';
        }
    });
    // Trigger change on page load to set initial state
    document.getElementById('input_mode').dispatchEvent(new Event('change'));
</script>
{% endblock %}