From ccce5d2bd067ac70df06055c0e64408c00d6d840 Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Wed, 20 Jan 2021 16:00:37 +0100
Subject: [PATCH] Added thymeleaf related buttons.

---
 .idea/workspace.xml                           |  11 ++++++---
 src/main/resources/static/css/main.css        |  20 +++++++++++++++++
 .../resources/static/img/icons8-cancel-64.png | Bin 0 -> 3040 bytes
 .../static/img/icons8-down-arrow-40.png       | Bin 0 -> 392 bytes
 .../resources/static/img/icons8-plus-48.png   | Bin 0 -> 2282 bytes
 .../resources/static/img/update-button.png    | Bin 0 -> 1444 bytes
 src/main/resources/static/js/uianimation.js   |  21 ++++++++++++++++++
 src/main/resources/templates/mock.html        |  17 ++++++++++----
 8 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 src/main/resources/static/img/icons8-cancel-64.png
 create mode 100644 src/main/resources/static/img/icons8-down-arrow-40.png
 create mode 100644 src/main/resources/static/img/icons8-plus-48.png
 create mode 100644 src/main/resources/static/img/update-button.png

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d7ff863..efc3b03 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -20,7 +20,12 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/icons8-cancel-64.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/icons8-down-arrow-40.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/icons8-plus-48.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/update-button.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/resources/static/css/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/css/main.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/templates/mock.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/mock.html" afterDir="false" />
     </list>
@@ -76,7 +81,7 @@
     <property name="aspect.path.notification.shown" value="true" />
     <property name="com.intellij.testIntegration.createTest.CreateTestDialog.defaultLibrary" value="JUnit5" />
     <property name="com.intellij.testIntegration.createTest.CreateTestDialog.defaultLibrarySuperClass.JUnit5" value="" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/main/resources/static/Dependency" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/main/resources/static" />
     <property name="restartRequiresConfirmation" value="false" />
     <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
   </component>
@@ -100,8 +105,8 @@
       <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\css" />
     </key>
     <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\Dependency" />
       <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static" />
+      <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\Dependency" />
       <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\dependency" />
       <recent name="D:\phabricator\mockedservices-master\src" />
       <recent name="D:\phabricator\mockedservices-master\src\main\resources" />
@@ -301,7 +306,7 @@
       <workItem from="1610986449789" duration="3336000" />
       <workItem from="1611052879244" duration="4081000" />
       <workItem from="1611059169455" duration="5146000" />
-      <workItem from="1611126794919" duration="8797000" />
+      <workItem from="1611126794919" duration="19071000" />
     </task>
     <task id="LOCAL-00077" summary="testing jenkins docker">
       <created>1601453886631</created>
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
index 8114922..d10eef0 100644
--- a/src/main/resources/static/css/main.css
+++ b/src/main/resources/static/css/main.css
@@ -189,3 +189,23 @@
     margin-bottom: 20px;
 }
 
+.headerName {
+    height: 20px;
+    padding: 5px;
+    width: 240px;
+    font-size: 18px;
+    background: #f0f0f0;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+}
+
+.headerField {
+    height: 20px;
+    padding: 5px;
+    width: 240px;
+    font-size: 18px;
+    background: white;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+}
+
diff --git a/src/main/resources/static/img/icons8-cancel-64.png b/src/main/resources/static/img/icons8-cancel-64.png
new file mode 100644
index 0000000000000000000000000000000000000000..da75c0b91f6bc6ff9f17afe4dd0e00dd1d719bf5
GIT binary patch
literal 3040
zcmV<63m^1}P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00006VoOIv0RI60
z0RN!9r;`8x3zbPkK~#90?VEpaRMi#7Kli;&He~Z-6UbtOfP`NWv<en<9MS1G?WkY}
zML;Mx)*n#Y=}eu_{^gG%|Fi;5b?U&Rb~=h;ZLqCXw4GXQ3$`LCwOS}4fS{;svPmGx
zl1=u#(?4Ez^Y-m~yDv*nX3Cklleh2Qd(QcO?|Jv$cis)0m;Y~3UKRWMWPuVMQi{uz
zqF6aPDEqa_R%X8zhi>QZTn>5ZNnMK!{T64PRc{FFNAXBQP&MbX2Uy@Wco{5kuAs>V
z?&ho;SjoYFa`DKIeh~+7`?U-<Q7mZ)s%>`Nnwt}v@NmkR6zHsC1D`4>!=~+8B(s=e
zt8*!)WcP8?Yq#suSEYmpoLB>H1fZC1S7--nH<r5ZHX1nYdHwb!_D+rnQH~!XL-)j9
zZ`DnAs&*wnDgLWqjuX6d)Kf;>o=3aydPff>EuT_+tc^hQBt;$FXuSzkV!&z>EW!*0
z8K^EN8L1>Ov4+I73o)w7vYksQw;^|uU~lIjVP6(jHv(GvWWJ_&B^UU7&tM?dP3WD2
zg!UXH5IyN;Ca(-c!o=rHp=a(?jOy|XhrQ+?=YZIL8zS5?wM4yax8b=89O{#sP&};Q
za_1`GGQp$`6&>%O;*IwS?P;|h=#dbmh|jF!<PBFaFtH}>ho47MgoFuu5gwURqF&2V
z?bnA-;xgXUX)+Zzx{bQleVXv^-zK!XrN9T>pTuX?)4BK>jPg-g(ICS1B7@a+rRum}
zeZC0*XpKvq9^e>chF9sktyKSJ2U@&;IO+-(vouI-={!!)o(v2{gJDoNwN!mF99{0K
zKpshteA1+P+YZX!+Fyv8f<=q>QS+-m(|zzbU5l<k0<NpMKV5zsw#KDS*J(<DSBU|}
zG`&jMTl>hpvY)+DzVkoSY<dON*N*_2PSe4-j2{jG=||vDpDaM}pn}VkBIq{Tr@{9P
zQ1j%=1V1`499w5i5|hRf{oc(;uqb2Ia$6llNC^B3Vcp~swOs+UCS;+47Zqr3%bguO
zNs}>6uQF=?u`d#1Ug?`Qj_7?0AfRWF;ITZKCfu4L;5`MiygJz@yy{=SIT-fmo^)Sx
z37t!?1IS5&4bNU}u<?vsjHRUXz1DLUJV5!*4=LT<l661p{b2~_#i>a!yH~37AX{2@
zoaz_ez<MP)cT08io9L%{Ge$dy97sjLI;D_Yp&$O;PPBNRz4n|e+UW%0Km5ZQJQp0c
zC=g&>0H8jonhz%grFaNvz_C9l{y0i#kH58EjV?#O<LjtN7a)f}!+7>DNc$;YeY13p
zsX$+GJ*vLe(zWGvB-Wj`U+A5Eoch`<2F8tXt4<2+SHjxKLG_}qo#4Q#$F>2B{Iu2Y
zUxaFyFm$7<2V-M167BNSJuNB{MsHjU;h{G|*?$z{XTSB;zjyXD+P*zMHR9WgJ+{bs
zH$tcHSw9Kn7QZ2=Ce>yt2$!KZE=ENvef0-HMJltv1B1H#=?Lv@A<$t(o@wwMulIwz
z1Oznh08{fj3CZD4vz3I)&>NSaA{BZ2t4IZU<B}}!0CMCrUp{~dVi4M$f5pnb6&7=O
zc8<!sm|Ok?T|FKo+>WXVd-hc|Vf4n^UBT1UW9c4-FJ-&;SrcE5Epko*WYte50Mmvu
z3rl+!$)7%l#9Wdf;WG3eEko5-XZ2H&F!~w~@SWWl8=gnnyL|frLeb~#1UgRv+^Fe%
zd^jP=kNV|<qX}8;i+};syuP6IIM#`=VXHd{6(K7UYO5Fu`^wzlH*Q6uvEloHNl8n_
zmR%RPL=-O^O~`F|3D7jID0oedbzyAqh=hs|dgF3bZ8a)Vg}!Dvgv&j^KZis+3iAP>
z_}FJiwq~W2l_AcZ4-j+uurel2iFIOb*n+-hC5*1jtg8s2|8Rx%yq1Tu`*xnf*!V0&
zJBOFGaY%8r9Ux7DEoV9%@=bz@`hp`MBNDbi%w-=?R+<NV;Uk|af%eV})wVR=zWfA;
z89rkIkij{@g9KObTOb-cbGr!I>C<jj3`~BUp8(9V5qnXIbzp3G8ai`qi%<1nY<wD`
z?IU9o6Rj_UfCTWi(ztozV0t`HPSDI<JzUWh=s7soG^@=B+Eqz2F*T@4JWZx9jwWTn
zk$%~AI3az95+bb$5hD~V9<d0BRH3iA6DnMmx|EcaqBq_NwWCMIrd4vjJ!t?(60#7J
zmw>rIFjZ-eDq%$CfJim^n!6xek;@lLD$39s?}FMfBV!xMIq_Ke0P8h4D>jYMVHD<>
zl}Hu(n!DY>pX_#@69!38wPViMzJ_@yF9E;|$o$?0FfjHELorf~w&q@U@SP_y*Kfvr
zbQ8onv+FC$(Hid_jD*5{5Rn6U2@pq0ER{7$)QvlP;5TlDXdA?0m>V|dAmQFKB0(_T
z%}anLtYc`il$O4RDQ5tFHH0gjDhI)DvcRX>$6}ZpHbJbzgM`&kTT_rPI_izQ1WXL7
zW`w1{hYFIZ%4AiT{>T^*(|;LLg|_BCcko>&F*iI3C!*Q?+S@T7+YDW9?+)c?_pgG{
z;o<p$xlcXyXwGki>4|S*P&HpvtS-H%SQQxtb--%?y<eThaAsY#a<Mn~^*<jRd5`|l
zHmi*r3E@gh_i$DK;kjJkGYGKD)Kc|{7_3%6&sB3k34TLP)lc*Q{{%#%`E^92R$CVm
zRQ*N1{Q%R@q`xo%?2@dmruXtoeH)g;A34BxVXlANANULs9*3^XC0q_4@vlS7X7$S_
zkLJUtyWMP!OP!|E1WW-Kh(xG-YbOfHTWC3my6{4%D2D?FkxjoqwYB-`n^AguVek8>
z+6$nv0uCI6En88i<9_;!rpy&<-`kV->uq|~Ka!B!mEr*f4Ps?ZGCnBOJo7Z=yWY;H
z@0^fRS6@xrw^j~)1R?!7%uui&;gN}hhbB{7;iV|H0yFW5ijG@v#VjqM;C;atRLs&6
zI=;EkD~X~rm=Zf|Pl=iEfQU8KNj7WN@sqN0+Lo<gg!boWt+Xv!hEYCrqRiu?uL3J2
zmYM{ox)YY!xp(#zoSZigFwV)+b?tTZ%$b`N`W`Zr5);_xeCF-P(CpH&cscPIGx@SZ
z-C5$(8|YZH)YWH?kG?}GF@d#%nt*H)GD1k#IdRW->6<j^O9!1Qef9O6Sp9t@5Xb<W
z<Gh2R#7c?T&j{TliU&2AmG6v@04kAS>{Cxry6@jEoPTi=pFWcltA2o4QsOr20~rJ)
zMA&QE4o&*bI3JA5_<&B6U>%ecfMk-<+n%9v$Lk{s%CB@?`wcp7TZ!m;26*s)V6vct
zl8!UDgx>upk>{U6i}wx>L4jg~%7`wzhu+y&WsGua<daGN2PO+505Ts30Ij!&s_o5$
z|Mo}nol7ZLl%jj?JlYqn#3-wD1rJb^q;C936VMu$x`0j-iW}1Nf@IDS07b`-QT6&u
zl<(dFrs<-o08xtGnX`#4SW5qd`V8QyzxLyOn(&%tu*we!o&>lZoJ@6aPK@bm+x<XC
z8x_0$O4;teQ~dd`j_;<WzqXF<IoHyC<#i;hhE9p6{-&>8CcHsE`bBtOgte1P)OI%;
zt^~9uWFhb(pgF_KZFK<mXh>ZLI@=j_-~)okS}8tpoIvaZdhaQ;L>~ZVummGiL2~q1
z`p1qVF<}a)8@@s^JUYusuTi&yclsoN66Q}XQLp+Upv87@(hj=N{}^$*&L?i5?bm*M
zaYW@iQ-kVCrybWXLn6$;W+3f&>cZwx27}7c&LPUXDyyB>Z?92Lne}=k1uk~8<&_X=
zabeJv-HaV0Ly?j$ZuP@0IrL?`3VDM^OkB_Txe_4C$`U()<}zj{Li2K7S(8dGu$s#5
z<EGbc*KJT7z6#3P`uZZEA*h-~u~gtg5t3PK+DPy+>`I0QDY-`23v@mo2L0_9*agg=
i?(+Xa=jFVd7ybtUvaCseT|`j;0000<MNUMnLSTYV*u|Cr

literal 0
HcmV?d00001

diff --git a/src/main/resources/static/img/icons8-down-arrow-40.png b/src/main/resources/static/img/icons8-down-arrow-40.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f9c67b13b3f31cc0f02dfb4083e3ce928ae30e7
GIT binary patch
literal 392
zcmV;30eAk1P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700006VoOIv0RI60
z0RN!9r;`8x0X<1XK~z|U?bkg^!%!H-@#7mUsinlkfW@J@)TvH>1HXgdq=O)Iuug&w
zBEdlyq2MH<lTiH#4z7aW?90+Y5Mym9*b=FOYlI*-_gr;({^QNf;kRBu;u<h9Qa#&w
z@@%^wKMTTe<Zy9&lHDF=2LPbxxc#~EOeubLbAQ(~u{~&F<Tn!_n*iAa$R<EG0kR2@
zO@M3yWD_8p0NDh{ru1-MIo;Z`vf1UaLZO@Vz2tfBgfl)GKYM<AeQyRqE9ri_)5-Os
z=;UZ=cf$w}0M^g_{n_dAYSDG_s{bVQ61Kay50A$O3!7^y_lH!6uP?4Hr{*hmE@M^l
zmX-MnTq+>IA$4%6fq))T7pDaT(jgg~HV{xlvN#F|{ERe#qk%v&(iF}J5crPleMFz8
maK@`O{Cch7*Z<og#rp!%_Loli6TTM!0000<MNUMnLSTZ-Y_Z({

literal 0
HcmV?d00001

diff --git a/src/main/resources/static/img/icons8-plus-48.png b/src/main/resources/static/img/icons8-plus-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4ffd9a755182e61b0ed374f6ad496a3fc235867
GIT binary patch
literal 2282
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
Ef~%@YlmGw#

literal 0
HcmV?d00001

diff --git a/src/main/resources/static/img/update-button.png b/src/main/resources/static/img/update-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a72824c9b61896725b6244cd5bdf1663be92b4c
GIT binary patch
literal 1444
zcmV;V1zY-wP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00006VoOIv0RI60
z0RN!9r;`8x1zAZ%K~zYI?U!3@({&Wb&+mU}|GjN(!F9c??9wt53F?SGh$b^g#x{l<
ztneoB!AnTMV7v?&_#aFZO+=$$G!oxP92=m64Mbw%g^(D<#E`glb6vNt?JjNUzg_#k
z{(P9-%C@pqdGNvS+y9*NKcC<4^z`KX5fmuT{w_^MrMZu!pi~Bu0D|BcGT}SR?i32i
zgH{sM+}2-CGvr=CsGg>1Bf~IAMXM+v5FrSHlul=4Nfc5Ta33#aKIrY-HvF%^jcpez
zHH`WbHKSTzR#s*)8I6b_h$UkcMS<Au+c-EnK9NbMf6quW&*wXUhwW131-Bl)vX`Xk
zH>#`M7K6dCqRM2IOeSH#I~Wmp{&>%kx)Zs+?T0TPQWWurB@$xP%3eKfGMQW4t|}uU
z3S!P@!5D^yhU3#yQy15v>$_Q&Rd%pfI<bOZRTQyqQPx)W>KUumveoHy8tzO4kl+#!
z2~SLM9LHltkpLkeNkXO97pbjQi&?MNEjqwxU@RF5ht4Zl37AdhJv6OC<KuxADmSQw
zz5JrdY}&FA%5j|H9T=RDW%)8M@+Z~a)XlSJcgg?&^?Uo&2|ZU6jmKW03G%V(``4E0
zblSOh%bX6qAPCzeS;B6&+c@GMi38*`S7Y17N`qc^y{6_N3qtdS7#j<6!C>e&MUZx#
zJGLcsxAHc<-s@CrnI4D3UTwG8at@CHV+05R_=iX0!SO)LT#ITM=0lg;Rk8q@3<k%)
zUI#zcE(Zkw=sn&P=zjC5M}womYvD*FHSd{)=86CSXm0PTVl>Pn#YOYo%W<3%42Ev5
zgP)#ZSyovNnghX;KzWA$^iQTzGkK#Z005F8pS9VotFuOo0es$}h$2Y4*kgr2XSE6h
z*1XDGtkr7s#>_Ssf+t5tMk6Es0G@pWLX_l7D=F_n?O?BTnoZ_CZnxXCu)MkYXMfT>
zdiubn7l1_XYc-k}#!JUYlBDKEspVdB|JQ$0sOez;<7%2ZPf--VWB>w~NvBO9<CnjB
zyYbU|1*S+OQI--LRbH`X^+G4c06w2DCWyj`p3b_0p{?xI(=<iZV}RLNfDjS|-rv(v
zw~@;CQWhGGMNjpxb?t>hx4+isped@MX2Zj!S=;2~lsq)#{~X}&k-3y+W@cb|I(mB=
zRBWM8kEe?ybgD01Yh9LHdngo|lzH)syMlE(EmTyLTUH~f8vw6((6B5^C=Zy<IPBI3
zi*h!XM1oT?Jb&ZDJN5oW;Mr+2KXOV-EgFa2zRA;Z?dOJrm)0x?-FmRsehY2<-r=w{
z+U@qatpF<+e7?a+aYo#qwaxv;7z22{-Z({4sLEAYoVDBSHoehk+%WKm_lD=lw>Jbn
z^PZ3(e(C?Hfd>GnWxu10VzP!(Y4*`1xyiNGZ7DM7@2HU1I~e5!{!sR|005}Dy|>n8
zbDkGP0mq{8lYqc!vs$;8IUV|iH%cZ`5DJB&sbq>5C0PW(K#(L^Y|t|$mXcLPMMaCM
z;P(d-k#OWfcgN=4xpoQwARG>92}Hiz-Ld%)%d*6+@J7T7LQ_>`#U0C@UateU+hty^
z<a6a69E?X}v7Vle&Cf0LqvrPBT7saTICo^r(Ok!l!{5B5Qqu?AZnwo?SakWjD#3Bs
zJK&3mvUv0yTX$-y802BQRQWzXn%nxzX$}1u!!YaZ4qM4`3w<;iSH{N1CPb0{HOUKm
z`rc|B$#=LFf5K22Y9B(dl_n{@TB9M=w3@;oV?mI_OeT#bS&k|S?i13Pk9&_d1(wTM
y@FL)0yHpuoQwaoV1R2Q$NrZ)jJdy44mFh3!lu#V!^D?3U0000<MNUMnLSTXl4!r#U

literal 0
HcmV?d00001

diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index 71c46a5..4198c52 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -27,3 +27,24 @@ function createMessageTab() {
 
 $("#optional").click(changeAdvancedVisibility);
 $(".menuFactory").click(createMessageTab);
+
+// var key = $("#headerKey");
+// var value = $("#headerValue");
+// function addHeaderTableRow(){
+//     var headerTable = document.getElementById("headerTable");
+//     headerTable.innerHTML +=
+//         '<tr>' +
+//             '<td>' +
+//                 '<input type="text" name="value" class="headerName" value="' + key.val() + '"\n disabled="disabled"/>' +
+//             '</td>' +
+//             '<td>' +
+//                 '<input type="text" name="httpHeaders[' + key.val() + ']" class="headerField" id="httpHeaders' + key.val() + '" value="' + value.val() +'"/>' +
+//             '</td>' +
+//         '</tr>';
+//     key.html("");
+//     value.html("");
+//     // alert("key: " + key.val() +
+//     // "\n" + "value: " + value.val());
+// }
+
+// key.keypress(function(e){ if(e.key == 'Enter') addHeaderTableRow()});
diff --git a/src/main/resources/templates/mock.html b/src/main/resources/templates/mock.html
index c46756e..e51e1dd 100644
--- a/src/main/resources/templates/mock.html
+++ b/src/main/resources/templates/mock.html
@@ -60,18 +60,27 @@
                                 <td>Value</td>
                             </tr>
                             <tr th:each="entry, stats : *{httpHeaders}">
-                                <td><input type="text" name="value" th:value="${entry.key}"
+                                <td><input type="text" name="value" class="headerName" th:value="${entry.key}"
                                                              disabled="disabled"/></td>
                                 <td>
-                                    &#9;
-                                    <input type="text" name="value"
-                                           th:field="*{httpHeaders[__${entry.key}__]}"/>
+                                    <input type="text" name="value" class="headerField" th:field="*{httpHeaders[__${entry.key}__]}"/>
                                     <button type="submit" name="removeHeader" th:value="${entry.key}">
                                         <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
                                     </button>
                                 </td>
                             </tr>
                         </table>
+                        <table id="nextHeaderTable">
+                            <tr>
+                                <td>
+                                    <input type="text" name="headerKey" id="headerKey" class="headerField" placeholder="next header"/>
+                                </td>
+                                <td>
+                                    <input type="text" name="headerValue" id="headerValue" class="headerField" placeholder="value"/>
+                                    <input type="image" name="addHeader" src="/img/icons8-plus-48.png" style="width: 20px;"/>
+                                </td>
+                            </tr>
+                        </table>
                     </div>
                     <div id="history" style="display:none;"></div>
                 </div>