createcontainer.gohtml RawHistoryFolder
1<div
2 class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow"
3 hx-ext="response-targets"
4>
5 <!-- Left Side: Docker Run Options -->
6 <div class="flex-grow bg-slate-100 p-4 rounded-md">
7 <h2 class="font-bold pb-4">Deploy a container based on {{.ImageName}}</h2>
8 {{if .ErrorMessage}}
9 <div class="text-red-500">{{.ErrorMessage}}</div>
10 {{ end }}
11 <form
12 action="/create-container/{{.ShortID}}"
13 method="post"
14 hx-post="/htmx/create-container/{{.ShortID}}"
15 hx-swap="innerHTML"
16 hx-target-*="#error-message-create-container-{{.ShortID}}"
17 >
18 <!-- Image Name -->
19 <div class="flex space-x-4 pb-4">
20 <div class="w-1/3">
21 <label class="block">Image name</label>
22 <input
23 type="text"
24 name="image_name"
25 class="w-full p-4 rounded-md bg-gray-100 border-gray-300 border-2"
26 value="{{.ImageName}}"
27 readonly
28 />
29 </div>
30
31 <div class="w-2/3">
32 <label class="block">Image ID</label>
33 <input
34 type="text"
35 name="image_id"
36 class="w-full p-4 rounded-md bg-gray-100 border-gray-300 border-2"
37 value="{{.ImageID}}"
38 readonly
39 />
40 </div>
41 </div>
42
43 <!-- Container Name -->
44 <div class="pb-4">
45 <label class="block">Container name</label>
46 <input
47 type="text"
48 name="container_name"
49 class="w-full p-4 rounded-md"
50 value="{{.ContainerName}}"
51 />
52 </div>
53 <!-- Http(s) / Subdomain / Domain -->
54 <div class="flex pb-4 space-x-4">
55 <!-- Protocol -->
56 <div class="w-1/4">
57 <label class="block">Protocol</label>
58 <select
59 name="container_protocol"
60 class="w-full p-4 rounded-md border-2 bg-slate-200 border-gray-300"
61 >
62 <option value="https">https</option>
63 <option value="http">http</option>
64 </select>
65 </div>
66
67 <!-- Subdomain -->
68 <div class="w-1/3">
69 <label class="block">Subdomain</label>
70 <input
71 type="text"
72 name="container_subdomain"
73 class="w-full p-4 rounded-md"
74 value="{{.ContainerSubdomain}}"
75 />
76 </div>
77
78 <!-- Domain -->
79 <div class="w-5/12">
80 <label class="block">Domain</label>
81 <input
82 type="text"
83 name="container_domain"
84 class="w-full p-4 rounded-md"
85 value="{{.ContainerDomain}}"
86 />
87 </div>
88 </div>
89 <!-- Ports -->
90 <div class="pb-4">
91 <label class="block">Ports</label>
92 <span class="text-gray-500"
93 >eg: 80:80/tcp (You can specify multiple ports by separating them with
94 a comma)</span
95 >
96 <input
97 type="text"
98 name="ports"
99 class="w-full p-4 rounded-md"
100 value="{{.Ports}}"
101 />
102 </div>
103
104 <!-- Volumes -->
105 <div class="pb-4">
106 <label class="block">Volumes</label>
107 <span class="text-gray-500">e.g. ./data:/container/data </span>
108 <input
109 type="text"
110 name="volumes"
111 class="w-full p-4 rounded-md"
112 value="{{.Volumes}}"
113 />
114 </div>
115
116 <div class="pb-4">
117 <label class="block">Environment variables</label>
118 <span class="text-gray-500">e.g. KEY=VALUE </span>
119 <textarea
120 name="environment_variables"
121 class="w-full p-4 rounded-md"
122 rows="4"
123 >{{.EnvironmentVariables}}</textarea
124 >
125 </div>
126 <!-- Restart: always/on-failure/only when stopped/never -->
127 <div class="pb-4">
128 <label class="block">Restart</label>
129 <select
130 name="restart"
131 class="w-full p-4 rounded-md border-2 bg-gray-100 border-gray-300"
132 >
133 <option value="always">Always</option>
134 <option value="on-failure">On failure</option>
135 <option value="unless-stopped">Unless stopped</option>
136 <option value="never">Never</option>
137 </select>
138 </div>
139
140 <input
141 type="submit"
142 value="Create"
143 id="create-container-submit"
144 class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
145 />
146 </form>
147 <div
148 id="error-message-create-container-{{.ShortID}}"
149 class="text-red-500"
150 ></div>
151 </div>
152</div>