<!---
This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/
-->
<div class="dqu-example">
<div>
    <button type="button" id="alert-trigger" class="primary" >Show alert</button>
    <button type="button" id="alert-success" class="primary" >Show success alert</button>
    <button type="button" id="alert-warn" class="primary" >Show warning alert</button>
    <button type="button" id="alert-error" class="primary" >Show error alert</button>
    <button type="button" id="alert-clear">Clear Alert</button>

</div>
<div id="alert" role="alert"></div>
</div>

//This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/

window.addEventListener('load', function () {
    fetch(translationFile)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
        langText = data;
        document.getElementById('alert-trigger').addEventListener('click', showSimpleAlert);
        document.getElementById('alert-success').addEventListener('click', showSuccessAlert);
        document.getElementById('alert-warn').addEventListener('click', showWarningAlert);
        document.getElementById('alert-error').addEventListener('click', showErrorAlert);
        document.getElementById('alert-clear').addEventListener('click', clearAlert);
    })
    .catch(error => {
      console.error("Error fetching or parsing JSON:", error);
    });
});

function showSimpleAlert()
{
    showAlert(langText["defaultMessage"]);
    
}
function showSuccessAlert()
{
    var icon = '<i class="fa-solid fa-circle-check icon success"></i>';
    var message = icon+ " " + langText["successMessage"];
    showAlert(message, "#eaf7e4");
}

function showWarningAlert()
{
    var icon = '<i class="fa-solid fa-circle-xmark icon warning"></i>';
    var message = icon+ " " + langText["warningMessage"];
    showAlert(message, "#fdedd5");
}

function showErrorAlert()
{
    var icon = '<i class="fa-solid fa-circle-xmark icon error"></i>';
    var message = icon+ " " + langText["errorMessage"];
    showAlert(message, "#ffe2d9");
}

function showAlert(html, bkColor) 
{
    var alert = document.getElementById('alert');
    if(typeof bkColor == "undefined") bkColor = "#eef2f5";
    alert.innerHTML = html;
    alert.style.backgroundColor = bkColor;
}

function clearAlert()
{
    showAlert(langText["alertClearedMessage"]);
}

/*
  Alert — Restyled
  Deque University ARIA Component

  This component has been adapted from an example provided by the W3C,
  in accordance with the W3C Software and Document License
  https://www.w3.org/copyright/software-license-2023/
*/

:root {
  --dqu-interactive: #2e5f7a;
  --dqu-interactive-hover: #3a7a9a;
  --dqu-interactive-light: rgba(46, 95, 122, 0.08);
  --dqu-bg-primary: #fcfaf8;
  --dqu-border-secondary: #8c827d;
  --dqu-text-primary: #21201e;
  --dqu-font-family: "Noto Sans", sans-serif;
}

[role="alert"] {
  padding: 12px 16px;
  border: 1px solid var(--dqu-border-secondary);
  border-radius: 8px;
  margin: 12px 0;
  font-family: var(--dqu-font-family);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--dqu-text-primary);
}

[role="alert"]:empty {
  display: none;
}

/* Buttons */
.dqu-example button {
  padding: 8px 14px;
  font-family: var(--dqu-font-family);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 4px;
  border-radius: 9999px;
  cursor: pointer;
  border: 1px solid var(--dqu-border-secondary);
  background: var(--dqu-bg-primary);
  color: var(--dqu-text-primary);
  transition: background-color 0.15s ease;
}

.dqu-example button:hover {
  background-color: var(--dqu-interactive-light);
  outline: 2px solid var(--dqu-interactive) !important;
  outline-offset: 2px;
}

.dqu-example button:focus {
  outline: 3px solid var(--dqu-interactive) !important;
  outline-offset: 2px;
}

/* Scoped to .dqu-example so specificity exceeds the scoped `.dqu-example button`
   base rule (which would otherwise win on `<button class="primary">`). */
.dqu-example .primary {
  background-color: var(--dqu-interactive);
  color: #ffffff;
  border-color: var(--dqu-interactive);
}

.dqu-example .primary:hover {
  background-color: var(--dqu-interactive-hover);
}

/* Alert icon styles — colors chosen for WCAG AA contrast
   against their respective JS-set background colors */
.icon {
  font-size: 18px;
}

/* Green check on #eaf7e4 (success bg) — #1a7d1a passes 4.7:1 */
.success {
  color: #1a7d1a;
}

/* Orange warning on #fdedd5 (warning bg) — #8a5700 passes 4.8:1 */
.warning {
  color: #8a5700;
}

/* Red error on #ffe2d9 (error bg) — #c62828 passes 4.6:1 */
.error {
  color: #c62828;
}