text: import { html } from 'lit-html'
  
  const ExitButton = (quitApplication) => html`
    <button clas="p-2 m-4" @click=${quitApplication}>
      <svg class="stroke-current text-white w-8 h-8" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
    </button>
  `
  
  const header = (quitApplication) => html`
    <navigation class="px-6 pt-4 flex items-center flex-row w-screen justify-between">
      <div class="rounded-full bg-blue-500 p-2 shadow">
        <svg fill="#4299e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-white stroke-current"><path d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
      </div>
      ${ExitButton(quitApplication)}
    </navigation>
  `
  
  const footer = ({ onClick }) => html`
    <footer class="px-6 py-4">
      <button @click="${onClick}" class="bg-blue-500 w-full p-2 rounded-md text-white">Create New JWT</button>
    </footer>
  `
  
  const firstLaunch = html`
    <svg class="w-48 h-48" viewBox="0 0 678.3 733">
      <defs><linearGradient id="4ca4b65a-1144-4de1-8925-6a62bc294928" x1="585.48" y1="733" x2="585.48" y2="673.63" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="266d8c0d-4533-41a2-a7bc-3c0f98c2c2fa" x1="93.98" x2="93.98" y2="673.63" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="deb99f58-9fb9-4a93-aaf8-4b4cb68821c1" x1="339.15" y1="681.8" x2="339.15" y2="0" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="c4ad51c6-ffe9-4991-94f6-4a02d4a38b0c" x1="339.15" y1="569.14" x2="339.15" y2="111.49" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="b91b9d0a-3c7c-4b7e-8301-556f9b68b111" x1="806.95" y1="427.79" x2="806.95" y2="354.24" gradientTransform="translate(-0.46 -24.57)" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="8f58feb2-c461-4934-9419-72f8b76f5e61" x1="780.89" y1="503.2" x2="780.89" y2="429.65" gradientTransform="translate(1269.92 -306.54) rotate(90)" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="d83c7eb3-9930-4e8e-abfa-53b87d59f968" x1="565.48" y1="376.26" x2="565.48" y2="302.71" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="3d971d9d-e0fc-4263-8761-c1789934eb12" x1="339.15" y1="423.21" x2="339.15" y2="255.09" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="18a30a45-ec9b-4146-ae9c-2a8eabf3bdf2" x1="290.11" y1="525.36" x2="290.11" y2="499.67" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="98f2a4d5-9270-4ece-b23b-fefaca1fb56f" x1="322.8" y1="525.36" x2="322.8" y2="499.67" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="a36f1bde-d0b8-4d42-abdf-c9e597afa610" x1="355.49" y1="525.36" x2="355.49" y2="499.67" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="a4e6c30c-4fa5-4c93-a462-54244d7638b4" x1="388.18" y1="525.36" x2="388.18" y2="499.67" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="bb8b14ca-ea5c-42e9-a47f-d810d565e441" x1="339.15" y1="389.93" x2="339.15" y2="288.36" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="c7b6fbbe-7ded-4a5e-a460-2ea21f819315" x1="377.6" y1="380.54" x2="377.6" y2="283.64" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/><linearGradient id="b424414b-c049-456f-9819-be23a4131db6" x1="377.6" y1="563.83" x2="377.6" y2="466.93" xlink:href="#4ca4b65a-1144-4de1-8925-6a62bc294928"/></defs><title>vault</title><rect x="560.38" y="673.63" width="50.2" height="59.37" fill="url(#4ca4b65a-1144-4de1-8925-6a62bc294928)"/><rect x="822.4" y="757.63" width="47.87" height="57.21" transform="translate(1431.82 1488.46) rotate(-180)" fill="#f5f5f5"/><rect x="68.88" y="673.63" width="50.2" height="59.37" fill="url(#266d8c0d-4533-41a2-a7bc-3c0f98c2c2fa)"/><rect x="70.05" y="673.63" width="47.87" height="57.21" fill="#f5f5f5"/><rect width="678.3" height="681.8" rx="14.86" ry="14.86" fill="url(#deb99f58-9fb9-4a93-aaf8-4b4cb68821c1)"/><rect x="4.67" y="3.5" width="670.12" height="670.12" rx="14.86" ry="14.86" fill="#fafafa"/><rect x="112.66" y="111.49" width="452.98" height="457.65" fill="url(#c4ad51c6-ffe9-4991-94f6-4a02d4a38b0c)"/><rect x="731.19" y="329.67" width="150.6" height="73.55" transform="translate(-327.85 135.06) rotate(-14.86)" fill="url(#b91b9d0a-3c7c-4b7e-8301-556f9b68b111)"/><rect x="732.35" y="330.84" width="148.27" height="71.22" transform="translate(-327.85 135.06) rotate(-14.86)" fill="#fff"/><rect x="737.22" y="333.17" width="138.55" height="66.55" transform="translate(-327.85 135.06) rotate(-14.86)" fill="#69f0ae"/><ellipse cx="805.77" cy="366.03" rx="25.68" ry="14.01" transform="translate(-327.77 134.87) rotate(-14.86)" fill="#fff"/><rect x="766.71" y="399.05" width="73.55" height="150.6" transform="translate(-167.04 996.12) rotate(-71.04)" fill="url(#8f58feb2-c461-4934-9419-72f8b76f5e61)"/><rect x="729.35" y="438.74" width="148.27" height="71.22" transform="translate(-63.14 -319.33) rotate(18.96)" fill="#fff"/><rect x="734.22" y="441.08" width="138.55" height="66.55" transform="translate(-63.14 -319.33) rotate(18.96)" fill="#69f0ae"/><ellipse cx="803.13" cy="473.61" rx="14.01" ry="25.68" transform="translate(-166.58 995.28) rotate(-71.04)" fill="#fff"/><rect x="490.18" y="302.71" width="150.6" height="73.55" fill="url(#d83c7eb3-9930-4e8e-abfa-53b87d59f968)"/><rect x="491.35" y="303.88" width="148.27" height="71.22" fill="#fff"/><rect x="496.21" y="306.21" width="138.55" height="66.55" fill="#69f0ae"/><ellipse cx="564.9" cy="338.9" rx="25.68" ry="14.01" fill="#fff"/><rect x="116.16" y="116.16" width="445.97" height="445.97" fill="#fff"/><circle cx="339.15" cy="339.15" r="84.06" fill="url(#3d971d9d-e0fc-4263-8761-c1789934eb12)"/><circle cx="339.15" cy="339.15" r="80.56" fill="#fafafa"/><rect x="277.86" y="499.67" width="24.52" height="25.68" fill="url(#18a30a45-ec9b-4146-ae9c-2a8eabf3bdf2)"/><rect x="310.55" y="499.67" width="24.52" height="25.68" fill="url(#98f2a4d5-9270-4ece-b23b-fefaca1fb56f)"/><rect x="343.23" y="499.67" width="24.52" height="25.68" fill="url(#a36f1bde-d0b8-4d42-abdf-c9e597afa610)"/><rect x="375.92" y="499.67" width="24.52" height="25.68" fill="url(#a4e6c30c-4fa5-4c93-a462-54244d7638b4)"/><rect x="278.44" y="500.84" width="23.35" height="23.35" fill="#4299e1"/><rect x="311.13" y="500.84" width="23.35" height="23.35" fill="#4299e1" opacity="0.7"/><rect x="343.82" y="500.84" width="23.35" height="23.35" fill="#4299e1" opacity="0.5"/><rect x="376.51" y="500.84" width="23.35" height="23.35" fill="#4299e1" opacity="0.3"/><rect x="628.61" y="371.8" width="4.67" height="16.34" transform="translate(71.2 -377.18) rotate(35)" fill="#4299e1"/><rect x="640.84" y="445.92" width="4.67" height="16.34" transform="translate(1123.21 103.69) rotate(125)" fill="#4299e1"/><rect x="566.72" y="458.15" width="4.67" height="16.34" transform="translate(506.87 1090.71) rotate(-145)" fill="#4299e1"/><rect x="554.49" y="384.03" width="4.67" height="16.34" transform="translate(-344.68 539.37) rotate(-55)" fill="#4299e1"/><rect x="628.57" y="371.66" width="4.67" height="16.34" transform="translate(71.11 -377.18) rotate(35)" opacity="0.2"/><rect x="640.81" y="445.78" width="4.67" height="16.34" transform="translate(1123.04 103.5) rotate(125)" opacity="0.2"/><rect x="566.68" y="458.02" width="4.67" height="16.34" transform="translate(506.88 1090.44) rotate(-145)" opacity="0.2"/><rect x="554.45" y="383.89" width="4.67" height="16.34" transform="translate(-344.58 539.28) rotate(-55)" opacity="0.2"/><circle cx="339.15" cy="339.15" r="50.78" fill="url(#bb8b14ca-ea5c-42e9-a47f-d810d565e441)"/><circle cx="339.15" cy="339.15" r="47.87" fill="#4299e1"/><path d="M560.89,429.57A47.86,47.86,0,0,1,632.56,388a47.86,47.86,0,1,0-57,76A47.71,47.71,0,0,1,560.89,429.57Z" transform="translate(-260.85 -84)" fill="#fff" opacity="0.2"/><path d="M396.28,380.54H358.92V287.26a3.63,3.63,0,0,1,3.63-3.62h30.11a3.63,3.63,0,0,1,3.63,3.63Z" transform="translate(-260.85 -84)" fill="url(#c7b6fbbe-7ded-4a5e-a460-2ea21f819315)"/><path d="M392.47,563.83H362.73a3.81,3.81,0,0,1-3.81-3.81V466.93h37.36V560A3.81,3.81,0,0,1,392.47,563.83Z" transform="translate(-260.85 -84)" fill="url(#b424414b-c049-456f-9819-be23a4131db6)"/><path d="M102.4,200.8h28.69a3.17,3.17,0,0,1,3.17,3.17V294.2a0,0,0,0,1,0,0h-35a0,0,0,0,1,0,0V204A3.17,3.17,0,0,1,102.4,200.8Z" fill="#fafafa"/><path d="M99.23,384.1h35a0,0,0,0,1,0,0v92.33a1.06,1.06,0,0,1-1.06,1.06H100.3a1.06,1.06,0,0,1-1.06-1.06V384.1A0,0,0,0,1,99.23,384.1Z" fill="#fafafa"/>
    </svg>
    <p class="mt-4 text-white font-semibold">Create a token to get started</p>
  `
  
  const list = (data, onJWTClick) => data.map((el, i) => html`
    <button @click="${() => onJWTClick(el.name)}" class="flex w-full items-center justify-between py-2 ${i && 'border-solid border-t-2'}">
      <p>${el.name}</p>
      <svg viewBox="0 0 20 20" class="w-8 h-8 text-gray-800 fill-current"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </button>
  `)
  
  export default ({ onFooterClick, data, onJWTClick, quitApplication }) => html`
    <div class="h-screen bg-gray-800 flex flex-col justify-between" >
      ${header(quitApplication)}
      <div class="w-screen flex flex-col items-center px-6 py-8 flex-1">
      ${data.length === 0 ? firstLaunch : html`<div class="bg-white w-full rounded-lg p-2">${list(data, onJWTClick)}</div>`}
      </div>
      ${footer({ onClick: onFooterClick })}
    </div>
  `
  