<html>
<head>
  <title>{{name}}</title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  {{#if storeLink}}
    <link rel="canonical" href="{{storeLink}}">
  {{/if}}

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href="/assets/css/about.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<header id="header" class="navbar navbar-expand-lg fixed-top crowdin-navbar">
  <a itemprop="url" class="navbar-brand crowdin-navbar__logo" href="https://crowdin.com" title="Crowdin — Localization Management Platform">
    <svg class="d-none d-md-block d-lg-block default-logo" width="180" height="54" aria-labelledby="crowdinLogoTitle">
      <title id="crowdinLogoTitle">Crowdin</title>
      <image class="d-none d-md-block d-lg-block" href="/assets/img/crowdin.svg" width="180" height="54" alt="Crowdin" />
    </svg>
    <svg class="d-block d-md-none d-lg-none default-logo" width="173" height="32">
      <image class="d-block d-md-none d-lg-none" href="/assets/img/crowdin_small.svg" width="173" height="32" alt="Crowdin"/>
    </svg>
  </a>
  <div class="flex-nowrap justify-content-lg-end ml-auto my-lg-0">
    <div class="pr-0 ml-2 my-2">
          <span class="crowdin-navbar__nav-link contact ">
            <a title="Contact" href="https://crowdin.com/contacts">Contact</a>
          </span>
    </div>
  </div>
</header>
<div class="main">
  <div class="container">
    <div class="row crwd__product-template__header align-items-center">

      <div class="offset-lg-1 col-lg-2 product-single__photo-wrapper crwd__product-single__photo-wrapper">
        <div class="product-single__photo text-center mb-3 mb-lg-0">
          <div class="image-holder">
            <img width="200" src="{{logo}}" alt="{{name}}" id="FeaturedImage-product-template" class="img-fluid lazyloaded ls-is-cached product-featured-img" style="position: unset;">
          </div>
        </div>
      </div>
      <div class=" col-lg-8 crwd__product-template__header__title-container">
        <div class="product-single__meta">
          <div class="section-header">
            <h1 class="product-single__title text-center text-lg-left">
              <span>{{name}}</span>
            </h1>
            <div class="description">
              {{name}} extends the default functionality available in Crowdin and Crowdin Enterprise by providing additional capabilities to enhance your localization workflows.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="offset-lg-1 col-lg-10">
        <p>To install this app, you can use either of the following methods: </p>
        <ol>
          <li>Install it directly from the <a href="https://store.crowdin.com/" target="_blank">Crowdin Store</a>, if available.</li>
          <li>Install it manually using the manifest URL below.</li>
        </ol>
        <p>For detailed steps, follow the <a href="https://support.crowdin.com/developer/crowdin-apps-installation/" target="_blank">App Installation</a></p>

        <div class="mb-3">
          <label for="manifest-url" class="form-label">Paste the following manifest URL when prompted during manual installation:</label>
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="manifest-url"
              value="{{manifest}}"
              readonly
            >
            <button class="btn btn-outline-secondary" type="button" id="copy-button">
              Copy
            </button>
          </div>
        </div>



        {{#if storeLink}}
          <div>Read more about <a href="{{storeLink}}" target="_blank" title="{{name}} on Crowdin Store">{{name}}</a>.</div>
        {{/if}}
      </div>
    </div>
  </div>
</div>
</body>
<script>
  document.getElementById('copy-button').addEventListener('click', async () => {
    const text = document.getElementById('manifest-url').value;
    await navigator.clipboard.writeText(text);
    const btn = document.getElementById('copy-button');
    btn.textContent = 'Copied!';
    setTimeout(() => btn.textContent = 'Copy', 1500);
  });
</script>
</html>
