<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paminga</title>
<!--
  Web resource: paminga_/pages/missing.html
  Shown inside the IFRAME_paminga_panel control when the panel cannot be loaded.
  panel.js navigates here with ?data=noemail | noname | notoken (the `data` parameter is the only
  free-form query parameter an HTML web resource accepts).
  No external assets: everything is inline (Dataverse web resources are static files).
-->
<style>
  :root {
    --paminga-blue: #0298FF;
    --paminga-blue-dark: #0277c8;
    --ink: #1f2933;
    --muted: #5f6b7a;
    --line: #e3e8ee;
    --bg: #f7f9fb;
    --card: #ffffff;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
  }
  .card {
    width: 100%;
    max-width: 560px;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--paminga-blue);
    border-radius: 8px;
    padding: 20px 24px 22px;
    margin-top: 12px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .brand svg { flex: 0 0 auto; }
  .brand span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paminga-blue);
  }
  h1 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 8px;
    font-weight: 600;
  }
  p { margin: 0 0 12px; color: var(--muted); }
  ol { margin: 0 0 12px; padding-left: 20px; color: var(--ink); }
  ol li { margin-bottom: 4px; }
  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: #eef4fa;
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--ink);
  }
  .foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
  }
  .foot a { color: var(--paminga-blue); text-decoration: none; }
  .foot a:hover { text-decoration: underline; }
  [hidden] { display: none !important; }
</style>
</head>
<body>
  <div class="card" role="status" aria-live="polite">
    <div class="brand" aria-hidden="true">
      <svg width="28" height="28" viewBox="0 0 28 28">
        <circle cx="14" cy="14" r="14" fill="#0298FF"/>
        <text x="14" y="19.5" text-anchor="middle" font-family="-apple-system, Segoe UI, Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff">P</text>
      </svg>
      <span>Paminga</span>
    </div>

    <!-- One block per reason. JavaScript un-hides the one that matches ?data= (or ?reason=); the
         generic block is the default when the parameter is absent or unrecognised. -->

    <section id="reason-noemail" hidden>
      <h1>This record has no email address</h1>
      <p>Paminga matches a Dynamics 365 contact or lead to its Paminga contact by email address, so the panel has nothing to look up yet.</p>
      <ol>
        <li>Enter the person's email address in the <strong>Email</strong> field (<code>emailaddress1</code>).</li>
        <li>Save the record. The Paminga panel refreshes on its own.</li>
      </ol>
    </section>

    <section id="reason-noname" hidden>
      <h1>This account has no name</h1>
      <p>Paminga matches a Dynamics 365 account to its Paminga account by name, so the panel has nothing to look up yet.</p>
      <ol>
        <li>Enter the company name in the <strong>Account Name</strong> field (<code>name</code>).</li>
        <li>Save the record. The Paminga panel refreshes on its own.</li>
      </ol>
    </section>

    <section id="reason-notoken" hidden>
      <h1>Paminga is not connected yet</h1>
      <p>The panel needs an API token before it can show Paminga data. A Dynamics 365 administrator sets it once for the whole organization.</p>
      <ol>
        <li>In Power Apps, open <strong>Solutions &rsaquo; Paminga for Dynamics 365</strong>.</li>
        <li>Set the current value of the environment variable <code>paminga_ApiToken</code> to a Paminga personal access token.</li>
        <li>Open the solution's <strong>Configuration</strong> page and use <strong>Test token</strong> to confirm it works.</li>
        <li>Reload this record.</li>
      </ol>
      <p>If you can see this message but are not an administrator, you may also be missing the <strong>Paminga User</strong> security role, which grants read access to the token.</p>
    </section>

    <section id="reason-generic">
      <h1>The Paminga panel could not load</h1>
      <p>Reload the record. If the problem continues, ask a Dynamics 365 administrator to open <strong>Solutions &rsaquo; Paminga for Dynamics 365 &rsaquo; Configuration</strong> and run <strong>Test token</strong>.</p>
    </section>

    <div class="foot">
      Need help? <a href="mailto:support@paminga.com">support@paminga.com</a>
    </div>
  </div>

<script>
(function () {
  // Only these keys are honoured. The query string is never written into the page,
  // so an unexpected value cannot inject markup.
  var known = { noemail: true, noname: true, notoken: true };
  var reason = '';
  try {
    // panel.js passes the reason in the `data` parameter: an HTML web resource accepts only
    // the documented parameters (data, typename, type, id, orgname, userlcid, orglcid, formid)
    // and rejects any other query string. `reason=` is accepted too for direct/manual loads.
    // https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/webpage-html-web-resources
    var m = /[?&](?:data|reason)=([^&#]*)/.exec(window.location.search || '');
    if (m) { reason = decodeURIComponent(m[1]).toLowerCase(); }
  } catch (e) { reason = ''; }

  // hasOwnProperty: a plain `known[reason]` lookup would also accept prototype keys such as
  // "constructor" or "__proto__".
  var id = Object.prototype.hasOwnProperty.call(known, reason) ? 'reason-' + reason : 'reason-generic';
  var generic = document.getElementById('reason-generic');
  var chosen = document.getElementById(id);
  if (chosen && chosen !== generic) {
    generic.hidden = true;
    chosen.hidden = false;
  }
})();
</script>
</body>
</html>
