{{define "title"}}Hex → pcap{{end}}

{{define "toolbar-info"}}<span class="toolbar-info">Build a pcap file from hex · <a href="/hex2pcap?example" class="toolbar-link">Load example</a></span>{{end}}

{{define "content"}}
{{with .Data}}
{{if .Error}}<div class="error" role="alert">{{.Error}}</div>{{end}}

<form method="post" action="/hex2pcap">
<section class="widget">
  <div class="widget-title"><h2>Packet</h2></div>
  <div class="widget-content">
    <p class="note">
      Paste hex for each layer. The fields are decoded and concatenated into one packet.
      Any field may be empty, so you can also paste a whole packet into a single field.
      Spaces, newlines, <code>:</code>, <code>-</code>, <code>0x</code> and <code>\x</code> are ignored.
    </p>

    <label for="l2">Layer 2 <span class="hint">e.g. Ethernet header</span></label>
    <textarea id="l2" name="l2" rows="2" spellcheck="false">{{.Form.L2}}</textarea>

    <label for="l3">Layer 3 <span class="hint">IPv4/IPv6 header with options, optionally followed by the TCP/UDP/ICMP header, or the SCTP header and chunk header(s)</span></label>
    <textarea id="l3" name="l3" rows="4" spellcheck="false">{{.Form.L3}}</textarea>

    <label for="l7">Payload <span class="hint">the rest of the packet, not interpreted</span></label>
    <textarea id="l7" name="l7" rows="6" spellcheck="false">{{.Form.L7}}</textarea>
  </div>
</section>

<section class="widget">
  <div class="widget-title"><h2>Options</h2></div>
  <div class="widget-content">
    <label class="check">
      <input type="checkbox" name="fix"{{if .Form.Fix}} checked{{end}}>
      Recalculate IP lengths and checksums
    </label>
    <p class="hint field-hint">
      IPv4/IPv6 length, IPv4 header checksum, TCP/UDP/ICMP/ICMPv6/SCTP checksum, UDP length.
      The end of the layer 3 field also sets the TCP data offset and the length of the SCTP chunk the payload belongs to
      (paste chunk data without padding).
    </p>

    <div class="row">
      <div>
        <label for="linktype">Link type</label>
        <select id="linktype" name="linktype">
          {{range .Options}}<option value="{{.Value}}"{{if eq .Value $.Data.Form.LinkType}} selected{{end}}>{{.Label}}</option>{{end}}
        </select>
      </div>
      <div>
        <label for="customlinktype">Custom link type</label>
        <input id="customlinktype" name="customlinktype" inputmode="numeric" value="{{.Form.CustomLinkType}}" placeholder="e.g. 228" aria-describedby="customlinktype-hint">
        <span id="customlinktype-hint" class="hint field-hint">Used when “Custom…” is selected</span>
      </div>
      <div>
        <label for="filename">File name</label>
        <input id="filename" name="filename" value="{{.Form.Filename}}" placeholder="packet.pcap">
      </div>
    </div>

    <div class="actions">
      <button type="submit" name="action" value="preview" class="btn">Preview</button>
      <button type="submit" name="action" value="download" class="btn primary">Download pcap</button>
    </div>
  </div>
</section>
</form>

{{with .Result}}
<section class="widget">
  <div class="widget-title"><h2>Preview</h2></div>
  <div class="widget-content">
    <dl class="summary">
      <dt>Packet length</dt><dd>{{len .Packet}} bytes</dd>
      <dt>Link type</dt><dd>{{.LinkTypeName}} ({{.LinkType}})</dd>
      <dt>Layers</dt>
      <dd>
        <span class="l2">layer 2: {{.L2Len}}</span> ·
        <span class="l3">layer 3: {{.L3Len}}</span> ·
        <span class="l7">payload: {{.L7Len}}</span>
      </dd>
    </dl>

    {{if .Fixed}}
    <h3>Fixups <span class="hint">IP header at offset {{.IPOffset}}</span></h3>
    <table>
      <thead><tr><th>Field</th><th>Old</th><th>New</th></tr></thead>
      <tbody>
        {{range .Fix.Changes}}
        <tr{{if ne .Old .New}} class="changed"{{end}}><td>{{.Field}}</td><td><code>{{.Old}}</code></td><td><code>{{.New}}</code></td></tr>
        {{end}}
      </tbody>
    </table>
    {{range .Fix.Notes}}<p class="note">{{.}}</p>{{end}}
    {{end}}

    <h3>Hex dump <span class="hint">changed bytes are underlined</span></h3>
    <pre class="dump">
{{- range .Dump -}}
<span class="off">{{.Offset}}</span>  {{range .Bytes}}<span class="{{.Class}}{{if .Changed}} chg{{end}}">{{.Hex}}</span>{{.Sep}}{{end}} {{.ASCII}}
{{end -}}
</pre>
  </div>
</section>
{{end}}
{{end}}
{{end}}