Dispatcharr/templates/channels/modals/add_stream.html

<div class="modal fade" id="addStreamModal" tabindex="-1" aria-labelledby="addStreamModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="addStreamForm" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="modal-header bg-dark text-white">
          <h5 class="modal-title" id="addStreamModalLabel">Add New Stream</h5>
          <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- Stream Details -->
          <div class="mb-3">
            <label for="newStreamNameField" class="form-label">Stream Name</label>
            <input type="text" class="form-control" id="newStreamNameField" name="name" required>
          </div>
          <div class="mb-3">
            <label for="newStreamGroupField" class="form-label">Stream Group</label>
            <input type="text" class="form-control" id="newStreamGroupField" name="stream_group" placeholder="Enter stream group (optional)">
          </div>
          <!-- The Stream Profile dropdown we’ll fill via JS -->
          <div class="mb-3">
            <label for="newStreamProfileField" class="form-label">Stream Profile</label>
            <select class="form-select" id="newStreamProfileField" name="stream_profile_id">
              <!-- Will be populated by fetch("/api/core/streamprofiles/") in JS -->
            </select>
          </div>

          <div class="mb-3">
            <label for="newStreamUrlField" class="form-label">Stream URL</label>
            <input type="url" class="form-control" id="newStreamUrlField" name="url" required>
          </div>
          <!-- etc... -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Create Stream</button>
        </div>
      </form>
    </div>
  </div>
</div>