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

{{define "content"}}
{{with .Data}}
<h1>Hex → pcap</h1>
<p class="lead">
  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.
  <a href="/hex2pcap?example">Load example</a>.
</p>

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

<form method="post" action="/hex2pcap">
  <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>

  <fieldset>
    <label class="check">
      <input type="checkbox" name="fix"{{if .Form.Fix}} checked{{end}}>
      Recalculate IP lengths and checksums
      <span class="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).</span>
    </label>

    <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 <span class="hint">when “Custom…” is selected</span></label>
        <input id="customlinktype" name="customlinktype" inputmode="numeric" value="{{.Form.CustomLinkType}}" placeholder="e.g. 228">
      </div>
      <div>
        <label for="filename">File name</label>
        <input id="filename" name="filename" value="{{.Form.Filename}}" placeholder="packet.pcap">
      </div>
    </div>
  </fieldset>

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

{{with .Result}}
<section class="result">
  <h2>Preview</h2>
  <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>
</section>
{{end}}
{{end}}
{{end}}