<span class="frame-name-view" id="frame-name-view">
  <span id="frame-name-text">{{ frame.name or ("Frame " ~ frame.id) }}</span>
  <button type="button" class="frame-name-pencil" id="frame-name-pencil" title="Rename frame" aria-label="Rename frame">&#9998;</button>
</span>
<span class="frame-name-edit" id="frame-name-edit-row" style="display: none;">
  <input type="text" id="frame-name-input" maxlength="64" value="{{ frame.name }}">
  <button type="button" class="btn-inline" id="frame-name-save">Save</button>
  <button type="button" class="btn-inline secondary" id="frame-name-cancel">Cancel</button>
</span>
<img id="frame-preview-thumb" class="frame-preview-thumb" alt="Live preview of what the frame is displaying" title="What the frame is currently displaying -- click to enlarge">

<dialog id="frame-preview-dialog" class="frame-preview-dialog">
  <button type="button" id="frame-preview-dialog-close" class="icon-btn" aria-label="Close" title="Close">&times;</button>
  <img id="frame-preview-dialog-img" alt="Live preview of what the frame is displaying" title="Click to refresh">
</dialog>

