<turbo-stream action="append" target="calculator-resources"><template><div data-cost-calculator-target="resource" data-cost-calculator-resource-type="service"
     data-controller="cost-calculator-resource"
     data-cost-calculator-resource-is-open-value="true"
     class="tw_scroll-m-48"
>
  <div class="tw_-mx-2.5 tw_p-2.5 tw_bg-white tw_border tw_border-slate-200 tw_rounded-2xl tw_z-1 tw_relative tw_transition tw_transition-all tw_duration-200"
        data-cost-calculator-resource-target="container"
  >
    <div class="tw_flex tw_gap-2">
      <div class="tw_text-nowrap tw_pr-2 tw_border-r tw_border-slate-200">
        <button name="button" type="button" class="tw_btn-primary tw_bg-slate-800 tw_px-4 tw_py-2 tw_text-base tw_font-normal tw_transition tw_duration-200 tw_text-nowrap" data-action="cost-calculator#removeResource" data-cost-calculator-resource-target="resourceButton">
          Service <div class="tw_w-6 tw_h-full tw_inline-block"><i class="fas fa-trash " data-cost-calculator-resource-target="timesIcon"></i><span class="tw_inline-grid tw_place-content-center tw_w-[22px] tw_h-[22px] tw_rounded-full tw_hidden" data-cost-calculator-resource-target="resourceIcon"><div class="tw_inline-block tw_fill-current tw_leading-[0.5] "><svg width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M9.75 6.375H2.25C2.05109 6.375 1.86032 6.45402 1.71967 6.59467C1.57902 6.73532 1.5 6.92609 1.5 7.125V9C1.5 9.19891 1.57902 9.38968 1.71967 9.53033C1.86032 9.67098 2.05109 9.75 2.25 9.75H9.75C9.94891 9.75 10.1397 9.67098 10.2803 9.53033C10.421 9.38968 10.5 9.19891 10.5 9V7.125C10.5 6.92609 10.421 6.73532 10.2803 6.59467C10.1397 6.45402 9.94891 6.375 9.75 6.375ZM9.75 9H2.25V7.125H9.75V9ZM9.75 2.25H2.25C2.05109 2.25 1.86032 2.32902 1.71967 2.46967C1.57902 2.61032 1.5 2.80109 1.5 3V4.875C1.5 5.07391 1.57902 5.26468 1.71967 5.40533C1.86032 5.54598 2.05109 5.625 2.25 5.625H9.75C9.94891 5.625 10.1397 5.54598 10.2803 5.40533C10.421 5.26468 10.5 5.07391 10.5 4.875V3C10.5 2.80109 10.421 2.61032 10.2803 2.46967C10.1397 2.32902 9.94891 2.25 9.75 2.25ZM9.75 4.875H2.25V3H9.75V4.875Z"/>
</svg>
</div></span></div>
</button>      </div>
      <div class="tw_grid lg:tw_grid-processes tw_grow">
        

<div class="tw_grow lg:tw_grow-0">
    <div class="tw_grid tw_grid-cols-2 tw_flex-between-center tw_box">
      <div class="tw_flex tw_gap-2">

        <span class="tw_font-medium tw_overflow-hidden tw_text-ellipsis tw_text-nowrap" data-resource-name="">service-51d1</span>
        
      </div>

      <span class="tw_text-slate-500 tw_text-sm tw_text-nowrap tw_max-w-16 lg:tw_max-w-none tw_overflow-hidden tw_text-ellipsis tw_text-end" 
            data-resource-info>
           postgres
      </span>
    </div>
</div>

        <div class="tw_hidden lg:tw_contents">
          

  <div class="tw_box tw_flex-center tw_gap-2">
      <span class="tw_font-semibold" data-bundles-target="allocatedStorage">128MB</span>
  </div>
  <div class="tw_box tw_text-center">
    <span class="tw_font-semibold" data-bundles-target="summary">0.1 | 128MB</span>
  </div>

        </div>
        <div class="tw_hidden lg:tw_contents">
          
<div class="tw_pill hover-parent tw_w-full tw_text-center">
    <span class="child" data-bundle-cost>€ 0.00</span>
</div>

        </div>
      </div>
      <div class="tw_min-w-[40px] tw_grid tw_place-content-center">
        <button class="tw_btn-plain tw_text-primary tw_p-2 tw_text-center" aria-expanded="true" aria-controls="collapse_service-1776197669809"
                data-action="cost-calculator-resource#toggle cost-calculator#resourceToggle" type="button"
        >
          &nbsp;<i class="far fa-long-arrow-down "></i>
        </button>
      </div>
    </div>
    <div class="collapse" id="collapse_service-1776197669809-resources" data-cost-calculator-resource-target="resourcesCollapse">
      <div class="tw_grid tw_grid-resources lg:tw_hidden tw_mt-2">
        

  <div class="tw_box tw_flex-center tw_gap-2">
      <span class="tw_font-semibold" data-bundles-target="allocatedStorage">128MB</span>
  </div>
  <div class="tw_box tw_text-center">
    <span class="tw_font-semibold" data-bundles-target="summary">0.1 | 128MB</span>
  </div>

        
<div class="tw_pill hover-parent tw_w-full tw_text-center">
    <span class="child" data-bundle-cost>€ 0.00</span>
</div>

      </div>
    </div>
  </div>
  <div class="collapse show" id="collapse_service-1776197669809" data-cost-calculator-resource-target="collapse">
    <div class="tw_grid tw_gap-4 tw_p-4 tw_pt-14 tw_-mt-10 tw_bg-white tw_border tw_border-slate-200 tw_rounded-b-3xl tw_border-t-0">
      <div class="tw_grid tw_grid-resources lg:tw_hidden">
        

  <div class="tw_box tw_flex-center tw_gap-2 tw_border-dashed tw_border-2 tw_border-indigo-200">
      <span class="tw_font-semibold" data-bundles-target="allocatedStorage">128MB</span>
  </div>
  <div class="tw_box tw_text-center tw_border-dashed tw_border-2 tw_border-indigo-200">
    <span class="tw_font-semibold" data-bundles-target="summary">0.1 | 128MB</span>
  </div>

        
<div class="tw_pill hover-parent tw_w-full tw_text-center">
    <span class="child" data-bundle-cost>€ 0.00</span>
</div>

      </div>
      <div class="lg:tw_hidden tw_w-full tw_h-px tw_bg-indigo-300"></div>
      

<form class="tw_contents" data-controller="service-form" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="TV8EmCcWxtCRyYR0nKhHcskvKNKmXzkceWeJZak8q0V0IEdMBmyDZBLTatvzeJC0Qzq-8FFMZlCuYdsJSN-bww" autocomplete="off" />
  <div class="tw_grid tw_gap-6">


      <div class="tw_row">
        <div class="tw_col-12 xl:tw_col-3">
          <label class="tw_font-bold" for="service_service_type">Service</label>
          <select class="tw_form-control" autocomplete="off" data-service-form-target="serviceTypeInput" data-action="service-form#updateServiceType" name="service[service_type]" id="service_service_type"><option selected="selected" value="postgres">postgres</option>
<option value="mysql">mysql</option>
<option value="redis">redis</option></select>
        </div>

        <div class="tw_col-12 lg:tw_col-9">
          <label class="tw_font-bold" for="service_slug">Slug</label> <span class="tw_text-slate-400"><div class="tw_inline-block tw_whitespace-normal" data-controller="popover" data-action="mouseover-&gt;popover#show mouseleave-&gt;popover#hide click-&gt;popover#toggle"><i class="fal fa-info-circle "></i><div class="tw_content tw_hidden tw_absolute lg:tw_max-w-xs tw_bg-indigo-100 tw_text-slate-600 tw_shadow tw_text-sm tw_rounded tw_p-2 tw_leading-tight tw_prose tw_z-50" data-popover-target="content" data-transition-enter="tw_transition tw_duration-300 tw_ease-in-out" data-transition-enter-from="tw_opacity-0 tw_transform tw_translate-y-2" data-transition-enter-to="tw_opacity-100 tw_transform tw_translate-y-0" data-transition-leave="tw_transition tw_duration-300 tw_ease-in-out" data-transition-leave-from="tw_opacity-100 tw_transform tw_translate-y-0" data-transition-leave-to="tw_opacity-0 tw_transform tw_translate-y-2">This is a unique identifier for your service, it cannot be changed after creation</div></div></span>
          <input class="tw_form-control" autocomplete="off" data-service-form-target="slugInput" data-action="service-form#updateSlug" type="text" value="service-51d1" name="service[slug]" id="service_slug" />
        </div>

<!--        <div class="tw_col-12 lg:tw_col-4">-->
<!--        </div>-->
      </div>

    
<div class="tw_grid tw_gap-6" data-controller="bundles"
     data-bundles-bundles-value="[{&quot;ram&quot;:128,&quot;cpu&quot;:0.1,&quot;cpu_cost&quot;:0,&quot;memory_cost&quot;:0,&quot;cost&quot;:0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 0 / month&quot;,&quot;display_parts&quot;:&quot;0.1 | 128MB&quot;,&quot;slug&quot;:&quot;0.1:cpu-128:memory&quot;},{&quot;ram&quot;:256,&quot;cpu&quot;:0.1,&quot;cpu_cost&quot;:0,&quot;memory_cost&quot;:0,&quot;cost&quot;:0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 0 / month&quot;,&quot;display_parts&quot;:&quot;0.1 | 256MB&quot;,&quot;slug&quot;:&quot;0.1:cpu-256:memory&quot;},{&quot;ram&quot;:512,&quot;cpu&quot;:0.25,&quot;cpu_cost&quot;:0,&quot;memory_cost&quot;:2.0,&quot;cost&quot;:2.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 2.0 / month&quot;,&quot;display_parts&quot;:&quot;0.25 | 512MB&quot;,&quot;slug&quot;:&quot;0.25:cpu-512:memory&quot;},{&quot;ram&quot;:512,&quot;cpu&quot;:0.5,&quot;cpu_cost&quot;:0.2,&quot;memory_cost&quot;:2.0,&quot;cost&quot;:2.2,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 2.2 / month&quot;,&quot;display_parts&quot;:&quot;0.5 | 512MB&quot;,&quot;slug&quot;:&quot;0.5:cpu-512:memory&quot;},{&quot;ram&quot;:512,&quot;cpu&quot;:1.0,&quot;cpu_cost&quot;:0.5,&quot;memory_cost&quot;:2.0,&quot;cost&quot;:2.5,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 2.5 / month&quot;,&quot;display_parts&quot;:&quot;1.0 | 512MB&quot;,&quot;slug&quot;:&quot;1.0:cpu-512:memory&quot;},{&quot;ram&quot;:512,&quot;cpu&quot;:1.5,&quot;cpu_cost&quot;:1,&quot;memory_cost&quot;:2.0,&quot;cost&quot;:3.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 3.0 / month&quot;,&quot;display_parts&quot;:&quot;1.5 | 512MB&quot;,&quot;slug&quot;:&quot;1.5:cpu-512:memory&quot;},{&quot;ram&quot;:1024,&quot;cpu&quot;:0.25,&quot;cpu_cost&quot;:0,&quot;memory_cost&quot;:4.0,&quot;cost&quot;:4.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 4.0 / month&quot;,&quot;display_parts&quot;:&quot;0.25 | 1GB&quot;,&quot;slug&quot;:&quot;0.25:cpu-1024:memory&quot;},{&quot;ram&quot;:1024,&quot;cpu&quot;:0.5,&quot;cpu_cost&quot;:0.2,&quot;memory_cost&quot;:4.0,&quot;cost&quot;:4.2,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 4.2 / month&quot;,&quot;display_parts&quot;:&quot;0.5 | 1GB&quot;,&quot;slug&quot;:&quot;0.5:cpu-1024:memory&quot;},{&quot;ram&quot;:1024,&quot;cpu&quot;:1.0,&quot;cpu_cost&quot;:0.5,&quot;memory_cost&quot;:4.0,&quot;cost&quot;:4.5,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 4.5 / month&quot;,&quot;display_parts&quot;:&quot;1.0 | 1GB&quot;,&quot;slug&quot;:&quot;1.0:cpu-1024:memory&quot;},{&quot;ram&quot;:1024,&quot;cpu&quot;:1.5,&quot;cpu_cost&quot;:1,&quot;memory_cost&quot;:4.0,&quot;cost&quot;:5.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 5.0 / month&quot;,&quot;display_parts&quot;:&quot;1.5 | 1GB&quot;,&quot;slug&quot;:&quot;1.5:cpu-1024:memory&quot;},{&quot;ram&quot;:1024,&quot;cpu&quot;:2.0,&quot;cpu_cost&quot;:2,&quot;memory_cost&quot;:4.0,&quot;cost&quot;:6.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 6.0 / month&quot;,&quot;display_parts&quot;:&quot;2.0 | 1GB&quot;,&quot;slug&quot;:&quot;2.0:cpu-1024:memory&quot;},{&quot;ram&quot;:2048,&quot;cpu&quot;:0.5,&quot;cpu_cost&quot;:0.2,&quot;memory_cost&quot;:8.0,&quot;cost&quot;:8.2,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 8.2 / month&quot;,&quot;display_parts&quot;:&quot;0.5 | 2GB&quot;,&quot;slug&quot;:&quot;0.5:cpu-2048:memory&quot;},{&quot;ram&quot;:2048,&quot;cpu&quot;:1.0,&quot;cpu_cost&quot;:0.5,&quot;memory_cost&quot;:8.0,&quot;cost&quot;:8.5,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 8.5 / month&quot;,&quot;display_parts&quot;:&quot;1.0 | 2GB&quot;,&quot;slug&quot;:&quot;1.0:cpu-2048:memory&quot;},{&quot;ram&quot;:2048,&quot;cpu&quot;:1.5,&quot;cpu_cost&quot;:1,&quot;memory_cost&quot;:8.0,&quot;cost&quot;:9.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 9.0 / month&quot;,&quot;display_parts&quot;:&quot;1.5 | 2GB&quot;,&quot;slug&quot;:&quot;1.5:cpu-2048:memory&quot;},{&quot;ram&quot;:2048,&quot;cpu&quot;:2.0,&quot;cpu_cost&quot;:2,&quot;memory_cost&quot;:8.0,&quot;cost&quot;:10.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 10.0 / month&quot;,&quot;display_parts&quot;:&quot;2.0 | 2GB&quot;,&quot;slug&quot;:&quot;2.0:cpu-2048:memory&quot;},{&quot;ram&quot;:2048,&quot;cpu&quot;:3.0,&quot;cpu_cost&quot;:4,&quot;memory_cost&quot;:8.0,&quot;cost&quot;:12.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 12.0 / month&quot;,&quot;display_parts&quot;:&quot;3.0 | 2GB&quot;,&quot;slug&quot;:&quot;3.0:cpu-2048:memory&quot;},{&quot;ram&quot;:3072,&quot;cpu&quot;:1.0,&quot;cpu_cost&quot;:0.5,&quot;memory_cost&quot;:12.0,&quot;cost&quot;:12.5,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 12.5 / month&quot;,&quot;display_parts&quot;:&quot;1.0 | 3GB&quot;,&quot;slug&quot;:&quot;1.0:cpu-3072:memory&quot;},{&quot;ram&quot;:3072,&quot;cpu&quot;:1.5,&quot;cpu_cost&quot;:1,&quot;memory_cost&quot;:12.0,&quot;cost&quot;:13.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 13.0 / month&quot;,&quot;display_parts&quot;:&quot;1.5 | 3GB&quot;,&quot;slug&quot;:&quot;1.5:cpu-3072:memory&quot;},{&quot;ram&quot;:3072,&quot;cpu&quot;:2.0,&quot;cpu_cost&quot;:2,&quot;memory_cost&quot;:12.0,&quot;cost&quot;:14.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 14.0 / month&quot;,&quot;display_parts&quot;:&quot;2.0 | 3GB&quot;,&quot;slug&quot;:&quot;2.0:cpu-3072:memory&quot;},{&quot;ram&quot;:3072,&quot;cpu&quot;:3.0,&quot;cpu_cost&quot;:4,&quot;memory_cost&quot;:12.0,&quot;cost&quot;:16.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 16.0 / month&quot;,&quot;display_parts&quot;:&quot;3.0 | 3GB&quot;,&quot;slug&quot;:&quot;3.0:cpu-3072:memory&quot;},{&quot;ram&quot;:3072,&quot;cpu&quot;:4.0,&quot;cpu_cost&quot;:6,&quot;memory_cost&quot;:12.0,&quot;cost&quot;:18.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 18.0 / month&quot;,&quot;display_parts&quot;:&quot;4.0 | 3GB&quot;,&quot;slug&quot;:&quot;4.0:cpu-3072:memory&quot;},{&quot;ram&quot;:4096,&quot;cpu&quot;:1.5,&quot;cpu_cost&quot;:1,&quot;memory_cost&quot;:16.0,&quot;cost&quot;:17.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 17.0 / month&quot;,&quot;display_parts&quot;:&quot;1.5 | 4GB&quot;,&quot;slug&quot;:&quot;1.5:cpu-4096:memory&quot;},{&quot;ram&quot;:4096,&quot;cpu&quot;:2.0,&quot;cpu_cost&quot;:2,&quot;memory_cost&quot;:16.0,&quot;cost&quot;:18.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 18.0 / month&quot;,&quot;display_parts&quot;:&quot;2.0 | 4GB&quot;,&quot;slug&quot;:&quot;2.0:cpu-4096:memory&quot;},{&quot;ram&quot;:4096,&quot;cpu&quot;:3.0,&quot;cpu_cost&quot;:4,&quot;memory_cost&quot;:16.0,&quot;cost&quot;:20.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 20.0 / month&quot;,&quot;display_parts&quot;:&quot;3.0 | 4GB&quot;,&quot;slug&quot;:&quot;3.0:cpu-4096:memory&quot;},{&quot;ram&quot;:4096,&quot;cpu&quot;:4.0,&quot;cpu_cost&quot;:6,&quot;memory_cost&quot;:16.0,&quot;cost&quot;:22.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 22.0 / month&quot;,&quot;display_parts&quot;:&quot;4.0 | 4GB&quot;,&quot;slug&quot;:&quot;4.0:cpu-4096:memory&quot;},{&quot;ram&quot;:6144,&quot;cpu&quot;:2.0,&quot;cpu_cost&quot;:2,&quot;memory_cost&quot;:24.0,&quot;cost&quot;:26.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 26.0 / month&quot;,&quot;display_parts&quot;:&quot;2.0 | 6GB&quot;,&quot;slug&quot;:&quot;2.0:cpu-6144:memory&quot;},{&quot;ram&quot;:6144,&quot;cpu&quot;:3.0,&quot;cpu_cost&quot;:4,&quot;memory_cost&quot;:24.0,&quot;cost&quot;:28.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 28.0 / month&quot;,&quot;display_parts&quot;:&quot;3.0 | 6GB&quot;,&quot;slug&quot;:&quot;3.0:cpu-6144:memory&quot;},{&quot;ram&quot;:6144,&quot;cpu&quot;:4.0,&quot;cpu_cost&quot;:6,&quot;memory_cost&quot;:24.0,&quot;cost&quot;:30.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 30.0 / month&quot;,&quot;display_parts&quot;:&quot;4.0 | 6GB&quot;,&quot;slug&quot;:&quot;4.0:cpu-6144:memory&quot;},{&quot;ram&quot;:8192,&quot;cpu&quot;:3.0,&quot;cpu_cost&quot;:4,&quot;memory_cost&quot;:32.0,&quot;cost&quot;:36.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 36.0 / month&quot;,&quot;display_parts&quot;:&quot;3.0 | 8GB&quot;,&quot;slug&quot;:&quot;3.0:cpu-8192:memory&quot;},{&quot;ram&quot;:8192,&quot;cpu&quot;:4.0,&quot;cpu_cost&quot;:6,&quot;memory_cost&quot;:32.0,&quot;cost&quot;:38.0,&quot;currency&quot;:&quot;EUR&quot;,&quot;currency_symbol&quot;:&quot;€&quot;,&quot;display_cost&quot;:&quot;€ 38.0 / month&quot;,&quot;display_parts&quot;:&quot;4.0 | 8GB&quot;,&quot;slug&quot;:&quot;4.0:cpu-8192:memory&quot;}]"
     data-bundles-selected-ram-value="128"
     data-bundles-selected-cpu-value="0.1"
     data-bundles-selected-storage-value="134217728"
     data-bundles-previous-cost-value=""
     data-bundles-storage-free-limit-bytes-value="134217728"
     data-bundles-storage-cost-per-gb-eur-value="0.12"
     data-bundles-first-cpu-label-class="tw_-translate-x-[20%]"
     data-bundles-cpu-label-class="tw_-translate-x-1/2"
     data-bundles-last-cpu-label-class="tw_translate-x-[-80%]"
     data-bundles-selected-cpu-label-class="tw_font-semibold tw_text-primary"
>
  <input value="0.1:cpu-128:memory" data-bundles-target="input" autocomplete="off" type="hidden" name="service[resource_bundle]" id="service_resource_bundle" />
  <div>
      <div class="tw_flex tw_gap-4 tw_mb-1.5 tw_justify-between lg:tw_justify-start">
        <p class="tw_font-bold">Bundle</p>
        <a data-action="bundles#setToLowest" class="tw_text-primary tw_underline" href="javascript:void(0)">Set to lowest</a>
      </div>
    <div class="tw_grid tw_gap-7 tw_shadow-sm tw_border-zinc-200 tw_rounded-md tw_p-2.5 tw_border">
      <div class="tw_grid lg:tw_flex tw_items-center tw_min-w-0">
        <p class="tw_w-28 tw_mb-2.5 tw_leading-120">Memory:</p>
        <div class="tw_hidden lg:tw_grid tw_w-full tw_gap-3 tw_py-2" style="grid-template-columns: repeat(9, 1fr)">
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_128" value="128" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" checked="checked" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_128">128MB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_256" value="256" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_256">256MB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_512" value="512" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_512">512MB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_1024" value="1024" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_1024">1GB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_2048" value="2048" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_2048">2GB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_3072" value="3072" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_3072">3GB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_4096" value="4096" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_4096">4GB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_6144" value="6144" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_6144">6GB</label>
            </div>
            <div>
              <input type="radio" name="memory_1776197669809" id="memory_1776197669809_8192" value="8192" data-action="bundles#selectRam" data-bundles-target="ramRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" />
              <label class="tw_radio-btn tw_min-w-full tw_whitespace-nowrap tw_shadow-sm" for="memory_1776197669809_8192">8GB</label>
            </div>
        </div>
        <select name="memory_1776197669809" id="memory_1776197669809" class="form-select tw_w-full lg:tw_hidden" data-action="bundles#selectRam" data-bundles-target="ramSelect" autocomplete="off"><option selected="selected" value="128">128MB</option>
<option value="256">256MB</option>
<option value="512">512MB</option>
<option value="1024">1GB</option>
<option value="2048">2GB</option>
<option value="3072">3GB</option>
<option value="4096">4GB</option>
<option value="6144">6GB</option>
<option value="8192">8GB</option></select>
      </div>
      <div class="tw_grid lg:tw_flex tw_items-center tw_gap-3 lg:tw_gap-0">
        <div class="tw_w-28">
          <span>CPU:</span>
          <div class="tw_inline-block tw_whitespace-normal" data-controller="popover" data-action="mouseover-&gt;popover#show mouseleave-&gt;popover#hide click-&gt;popover#toggle"><i class="fal fa-info-circle "></i><div class="tw_content tw_hidden tw_absolute lg:tw_max-w-xs tw_bg-indigo-100 tw_text-slate-600 tw_shadow tw_text-sm tw_rounded tw_p-2 tw_leading-tight tw_prose tw_z-50" data-popover-target="content" data-transition-enter="tw_transition tw_duration-300 tw_ease-in-out" data-transition-enter-from="tw_opacity-0 tw_transform tw_translate-y-2" data-transition-enter-to="tw_opacity-100 tw_transform tw_translate-y-0" data-transition-leave="tw_transition tw_duration-300 tw_ease-in-out" data-transition-leave-from="tw_opacity-100 tw_transform tw_translate-y-0" data-transition-leave-to="tw_opacity-0 tw_transform tw_translate-y-2">A value of 1.5 means your app will be able to utilize up to 100% of one core and up to 50% of a second core</div></div>
        </div>
        <div class="tw_w-full tw_flex tw_gap-3">
          <div class="tw_w-full tw_pt-4 range-wrap tw_relative">
            <div id="cpus" class="datalist tw_flex-between-center tw_w-full tw_text-center tw_absolute tw_top-0">
                <div data-bundles-target="cpuLabel" data-cpu="0.1">
                  <span class="tw_-translate-y-2.5">0.1</span>
                </div>
                <div data-bundles-target="cpuLabel" data-cpu="0.25">
                  <span class="tw_-translate-y-2.5">0.25</span>
                </div>
                <div data-bundles-target="cpuLabel" data-cpu="0.5">
                  <span class="tw_-translate-y-2.5">0.5</span>
                </div>
                <div data-bundles-target="cpuLabel" data-cpu="1">
                  <span class="tw_-translate-y-2.5">1.0</span>
                </div>
                <div data-bundles-target="cpuLabel" data-cpu="1.5">
                  <span class="tw_-translate-y-2.5">1.5</span>
                </div>
                <div data-bundles-target="cpuLabel" data-cpu="2">
                  <span class="tw_-translate-y-2.5">2.0</span>
                </div>
                <div data-bundles-target="cpuLabel" data-cpu="3">
                  <span class="tw_-translate-y-2.5">3.0</span>
                </div>
                <div data-bundles-target="cpuLabel" data-cpu="4">
                  <span class="tw_-translate-y-2.5">4.0</span>
                </div>
            </div>
            <input type="range" name="cpu" id="cpu" value="0.1" min="0" max="8" step="1" list="cpus" class="tw_form-range" autocomplete="off" data-bundles-target="cpuSlider" data-action="bundles#selectCpu" />
          </div>
        </div>
      </div>
    </div>
  </div>

    <div>
      <label class="tw_mb-1.5 tw_font-bold" for="service_storage_bytes_limit">Storage</label>
      <span class="tw_text-slate-400"><div class="tw_inline-block tw_whitespace-normal" data-controller="popover" data-action="mouseover-&gt;popover#show mouseleave-&gt;popover#hide click-&gt;popover#toggle"><i class="fal fa-info-circle "></i><div class="tw_content tw_hidden tw_absolute lg:tw_max-w-xs tw_bg-indigo-100 tw_text-slate-600 tw_shadow tw_text-sm tw_rounded tw_p-2 tw_leading-tight tw_prose tw_z-50" data-popover-target="content" data-transition-enter="tw_transition tw_duration-300 tw_ease-in-out" data-transition-enter-from="tw_opacity-0 tw_transform tw_translate-y-2" data-transition-enter-to="tw_opacity-100 tw_transform tw_translate-y-0" data-transition-leave="tw_transition tw_duration-300 tw_ease-in-out" data-transition-leave-from="tw_opacity-100 tw_transform tw_translate-y-0" data-transition-leave-to="tw_opacity-0 tw_transform tw_translate-y-2">First 128MB of reserved storage is free. After that, cost is calculated as € 0.12 per 1GB of reserved storage per month. <a target="_blank" href="/docs#storage-charges">Learn more</a></div></div></span>
      <div class="tw_box tw_shadow-sm">
        <div id="storage" class="tw_flex-between-center">
          <p class="tw_w-28">storage:</p>
          <div class="tw_hidden lg:tw_flex tw_w-full tw_justify-between tw_gap-3 tw_py-2 tw_px-0.5">
              <input data-action="bundles#selectStorage" data-bundles-target="storageRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" id="service_storage_bytes_limit_1776197669809_134217728" type="radio" value="134217728" checked="checked" name="service[storage_bytes_limit]" />
              <label class="tw_radio-btn tw_min-w-20 tw_whitespace-nowrap tw_grow tw_shadow-sm" for="service_storage_bytes_limit_1776197669809_134217728">128MB</label>
              <input data-action="bundles#selectStorage" data-bundles-target="storageRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" id="service_storage_bytes_limit_1776197669809_536870912" type="radio" value="536870912" name="service[storage_bytes_limit]" />
              <label class="tw_radio-btn tw_min-w-20 tw_whitespace-nowrap tw_grow tw_shadow-sm" for="service_storage_bytes_limit_1776197669809_536870912">512MB</label>
              <input data-action="bundles#selectStorage" data-bundles-target="storageRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" id="service_storage_bytes_limit_1776197669809_1073741824" type="radio" value="1073741824" name="service[storage_bytes_limit]" />
              <label class="tw_radio-btn tw_min-w-20 tw_whitespace-nowrap tw_grow tw_shadow-sm" for="service_storage_bytes_limit_1776197669809_1073741824">1GB</label>
              <input data-action="bundles#selectStorage" data-bundles-target="storageRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" id="service_storage_bytes_limit_1776197669809_2147483648" type="radio" value="2147483648" name="service[storage_bytes_limit]" />
              <label class="tw_radio-btn tw_min-w-20 tw_whitespace-nowrap tw_grow tw_shadow-sm" for="service_storage_bytes_limit_1776197669809_2147483648">2GB</label>
              <input data-action="bundles#selectStorage" data-bundles-target="storageRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" id="service_storage_bytes_limit_1776197669809_5368709120" type="radio" value="5368709120" name="service[storage_bytes_limit]" />
              <label class="tw_radio-btn tw_min-w-20 tw_whitespace-nowrap tw_grow tw_shadow-sm" for="service_storage_bytes_limit_1776197669809_5368709120">5GB</label>
              <input data-action="bundles#selectStorage" data-bundles-target="storageRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" id="service_storage_bytes_limit_1776197669809_10737418240" type="radio" value="10737418240" name="service[storage_bytes_limit]" />
              <label class="tw_radio-btn tw_min-w-20 tw_whitespace-nowrap tw_grow tw_shadow-sm" for="service_storage_bytes_limit_1776197669809_10737418240">10GB</label>
              <input data-action="bundles#selectStorage" data-bundles-target="storageRadio" class="tw_absolute tw_opacity-0 tw_-z-10" autocomplete="off" id="service_storage_bytes_limit_1776197669809_32212254720" type="radio" value="32212254720" name="service[storage_bytes_limit]" />
              <label class="tw_radio-btn tw_min-w-20 tw_whitespace-nowrap tw_grow tw_shadow-sm" for="service_storage_bytes_limit_1776197669809_32212254720">30GB</label>
          </div>
        </div>
      </div>
      <p class="input-hint">Occupying all the reserved storage will stop the service. <a class="tw_underline" target="_blank" href="/docs#storage">Learn more</a></p>
    </div>


</div>

  </div>

    <div class="tw_flex-between-center">
      <p class="tw_text-slate-400 tw_text-sm">
        <a target="_blank" href="/docs#pricing">
          Learn about charges <i class="fal fa-external-link "></i>
</a>      </p>
      <div class="tw_ms-auto">
            
        <button name="button" type="button" class="tw_btn-primary" data-action="cost-calculator-resource#toggle cost-calculator#resourceToggle" aria-expanded="true" aria-controls="collapse_service-1776197669809">
          Save <div class="tw_inline-block tw_fill-current tw_leading-[0.5] tw_ms-1.5 tw_text-lg "><svg width="1em" height="1em" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="heroicons-outline:save">
<path id="Vector" d="M12 12.75L14.25 12.75C14.6478 12.75 15.0294 12.592 15.3107 12.3107C15.592 12.0294 15.75 11.6478 15.75 11.25L15.75 4.5C15.75 4.10218 15.592 3.72065 15.3107 3.43934C15.0294 3.15804 14.6478 3 14.25 3L3.75 3C3.35217 3 2.97064 3.15804 2.68934 3.43934C2.40804 3.72065 2.25 4.10218 2.25 4.5L2.25 11.25C2.25 11.6478 2.40804 12.0294 2.68934 12.3107C2.97064 12.592 3.35218 12.75 3.75 12.75L6 12.75M6.75 9.75L9 7.5M9 7.5L11.25 9.75M9 7.5L9 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M12 12.75L14.25 12.75C14.6478 12.75 15.0294 12.592 15.3107 12.3107C15.592 12.0294 15.75 11.6478 15.75 11.25L15.75 4.5C15.75 4.10218 15.592 3.72065 15.3107 3.43934C15.0294 3.15804 14.6478 3 14.25 3L3.75 3C3.35217 3 2.97064 3.15804 2.68934 3.43934C2.40804 3.72065 2.25 4.10218 2.25 4.5L2.25 11.25C2.25 11.6478 2.40804 12.0294 2.68934 12.3107C2.97065 12.592 3.35218 12.75 3.75 12.75L6 12.75" stroke="currentColor" stroke-width="1.4" stroke-linecap="square" stroke-linejoin="round"/>
</g>
</svg>
</div>
</button>

      </div>
    </div>

</form>    </div>
  </div>
</div>
</template></turbo-stream>