<!-- Metadados do Módulo -->
@* <script type="application/json" id="module-metadata">
    {
        "moduleId": "sentence-converter",
        "jsUrl": "/js/sentence-converter-widget.js",
        "jsFunction": "SentenceConverterWidget.init",
        //"cssUrl": "/css/sentence-converter-widget.css",
        "version": "1.0.0",
        "dependencies": []
    }
</script>
 *@

<script type="application/json" id="module-metadata">
    {
        "moduleId": "sentence-converter",
        "jsUrl": "/js/sentence-converter-widget.js",
        "jsFunction": "SentenceConverterWidget.init",
        "version": "1.0.0",
        "dependencies": []
    }
</script>

<!-- Widget HTML -->
<div class="sentence-converter-widget"
     data-converter-id="sentence-converter"
     data-module-id="sentence-converter">

    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label fw-bold">@ViewBag.Config.LocalizedTexts["InputPlaceholder"]</label>
            <textarea class="form-control"
                      id="inputText"
                      rows="6"
                      placeholder="@ViewBag.Config.LocalizedTexts["InputPlaceholder"]"
                      maxlength="10000"></textarea>
            <small class="text-muted">
                <span id="charCount">0</span>/10000 caracteres
            </small>
        </div>
        <div class="col-md-6 mb-3">
            <label class="form-label fw-bold">@ViewBag.Config.LocalizedTexts["OutputLabel"]</label>
            <textarea class="form-control"
                      id="outputText"
                      rows="6"
                      readonly
                      placeholder="Resultado aparecerá aqui..."></textarea>
            <div class="mt-2">
                <button type="button" class="btn btn-primary" id="convertBtn">
                    <i class="fas fa-exchange-alt me-2"></i>
                    @ViewBag.Config.LocalizedTexts["ConvertButton"]
                </button>
                <button type="button" class="btn btn-success" id="copyBtn" disabled>
                    <i class="fas fa-copy me-2"></i>
                    @ViewBag.Config.LocalizedTexts["CopyButton"]
                </button>
                <button type="button" class="btn btn-secondary" id="clearBtn">
                    <i class="fas fa-trash me-2"></i>
                    @ViewBag.Config.LocalizedTexts["ClearButton"]
                </button>
            </div>
        </div>
    </div>

    <div id="conversionStatus" class="mt-3"></div>
</div>

<!-- Configuração para o JavaScript -->
<script type="application/json" id="widget-config">
    {
        "language": "@ViewBag.Language",
        "convertButtonText": "@ViewBag.Config.LocalizedTexts["ConvertButton"]",
        "labels": {
            "inputPlaceholder": "@ViewBag.Config.LocalizedTexts["InputPlaceholder"]",
            "outputLabel": "@ViewBag.Config.LocalizedTexts["OutputLabel"]",
            "convertButton": "@ViewBag.Config.LocalizedTexts["ConvertButton"]",
            "copyButton": "@ViewBag.Config.LocalizedTexts["CopyButton"]",
            "clearButton": "@ViewBag.Config.LocalizedTexts["ClearButton"]"
        },
        "messages": {
            "enterText": "Por favor, digite algum texto.",
            "converting": "Convertendo...",
            "success": "Conversão realizada com sucesso!",
            "copied": "Texto copiado para a área de transferência!",
            "connectionError": "Erro de conexão. Tente novamente.",
            "copyError": "Erro ao copiar texto."
        },
        "endpoints": {
            "convert": "/api/converter/convert",
            "health": "/api/converter/health"
        }
    }
</script>