{#include main}
  {#style}
.extension {
    background: #205894;
    color: white;
    position: relative;
}
.extension > .guide {
    background: #4695eb;
    position: absolute;
    top: 0;
    right: 0;
}
.extension > .guide > a.btn {
    border-radius: 0;
}
{/style}
  {#title}Quarkus DEV Console{/title}
  {#body}
   <div class="row row-cols-1 row-cols-md-4">
   <div class="col mb-4">
       <div class="card h-100">
           <div class="card-body extension">
               <h5 class="card-title">Config Editor</h5>
               <p class="card-text">
                   <a href="io.quarkus.quarkus-vertx-http/config" class="badge badge-light">
                   <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-egg" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                       <path fill-rule="evenodd" d="M8 15a5 5 0 0 0 5-5c0-1.956-.69-4.286-1.742-6.12-.524-.913-1.112-1.658-1.704-2.164C8.956 1.206 8.428 1 8 1c-.428 0-.956.206-1.554.716-.592.506-1.18 1.251-1.704 2.164C3.69 5.714 3 8.044 3 10a5 5 0 0 0 5 5zm0 1a6 6 0 0 0 6-6c0-4.314-3-10-6-10S2 5.686 2 10a6 6 0 0 0 6 6z"/>
                   </svg>
                   Open Editor</a>
               </p>
           </div>
       </div>
   </div>
   {#each actionableExtensions}
       {#extension it/}
   {/each}
   </div>
   {#if nonActionableExtensions.size() > 0}
   <hr/>
   <div class="row row-cols-1 row-cols-md-4">
   {#each nonActionableExtensions}
       {#extension it/}
   {/each}
   {/if}
  {/body}
{/include}