createcontainer.gohtml RawHistoryFolder

1<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow" hx-ext="response-targets">
2  <!-- Left Side: Docker Run Options -->
3  <div class="flex-grow bg-slate-100 p-4 rounded-md">
4    <h2 class="font-bold pb-4">Deploy a container based on {{.ImageName}}</h2>
5    {{if .ErrorMessage}}
6    <div class="text-red-500">{{.ErrorMessage}}</div>
7    {{ end }}
8    <form action="/create-container/{{.ShortID}}" method="post" hx-post="/htmx/create-container/{{.ShortID}}"
9      hx-swap="innerHTML" hx-target-*="#error-message-create-container-{{.ShortID}}">
10      <!-- Image Name -->
11      <div class="flex space-x-4 pb-4">
12        <div class="w-1/3">
13          <label class="block">Image name</label>
14          <input type="text" name="image_name" class="w-full p-4 rounded-md bg-gray-100 border-gray-300 border-2"
15            value="{{.ImageName}}" readonly />
16        </div>
17
18        <div class="w-2/3">
19          <label class="block">Image ID</label>
20          <input type="text" name="image_id" class="w-full p-4 rounded-md bg-gray-100 border-gray-300 border-2"
21            value="{{.ImageID}}" readonly />
22        </div>
23      </div>
24
25      <!-- Container Name -->
26      <div class="pb-4">
27        <label class="block">Container name</label>
28        <input type="text" name="container_name" class="w-full p-4 rounded-md" value="{{.ContainerName}}" />
29      </div>
30      <!-- Http(s) / Subdomain / Domain -->
31      <div class="flex pb-4 space-x-4">
32        <!-- Protocol -->
33        <div class="w-1/4">
34          <label class="block">Protocol</label>
35          <select name="container_protocol" class="w-full p-4 rounded-md border-2 bg-slate-200 border-gray-300">
36            <option value="https">https</option>
37            <option value="http">http</option>
38          </select>
39        </div>
40
41        <!-- Subdomain -->
42        <div class="w-1/3">
43          <label class="block">Subdomain</label>
44          <input type="text" name="container_subdomain" class="w-full p-4 rounded-md" value="{{.ContainerSubdomain}}" />
45        </div>
46
47        <!-- Domain -->
48        <div class="w-5/12">
49          <label class="block">Domain</label>
50          <input type="text" name="container_domain" class="w-full p-4 rounded-md" value="{{.ContainerDomain}}" />
51        </div>
52      </div>
53      <!-- Exposed Ports -->
54      <div class="pb-4">
55        <label class="block">Exposed Ports (Optional)</label>
56        <span class="text-gray-500">
57          eg: 8080:1887/tcp (You can specify multiple ports by separating them with a comma)
58        </span>
59        <input type="text" name="ports" class="w-full p-4 rounded-md" value="{{.Ports}}" />
60      </div>
61
62      <!-- Traefik Entry Point -->
63      <div class="pb-4">
64        <label class="block">Traefik Entry Point (Required)</label>
65        <span class="text-gray-500">
66          Specify the internal container port used in Traefik's loadbalancer labels
67        </span>
68        <input type="text" name="traefik_entry_point" class="w-full p-4 rounded-md" value="{{.TraefikEntryPoint}}" required />
69      </div>
70      
71      <!-- Volumes -->
72      <div class="pb-4">
73        <label class="block">Volumes</label>
74        <span class="text-gray-500">e.g. ./data:/container/data </span>
75        <input type="text" name="volumes" class="w-full p-4 rounded-md" value="{{.Volumes}}" />
76      </div>
77
78      <div class="pb-4">
79        <label class="block">Environment variables</label>
80        <span class="text-gray-500">e.g. KEY=VALUE </span>
81        <textarea name="environment_variables" class="w-full p-4 rounded-md"
82          rows="4">{{.EnvironmentVariables}}</textarea>
83      </div>
84      <!-- Restart: always/on-failure/only when stopped/never -->
85      <div class="pb-4">
86        <label class="block">Restart</label>
87        <select name="restart" class="w-full p-4 rounded-md border-2 bg-gray-100 border-gray-300">
88          <option value="always">Always</option>
89          <option value="on-failure">On failure</option>
90          <option value="unless-stopped">Unless stopped</option>
91          <option value="never">Never</option>
92        </select>
93      </div>
94
95      <input type="submit" value="Create" id="create-container-submit"
96        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" />
97    </form>
98    <div id="error-message-create-container-{{.ShortID}}" class="text-red-500"></div>
99  </div>
100</div>