<form id="publish-channel-form">
    <p id="input-error-channel-name" class="info-message-placeholder info-message--failure"></p>
    <div class="row row--wide row--short">
        <div class="column column--3 column--sml-10">
            <label class="label" for="new-channel-name">Name:</label>
        </div><div class="column column--6 column--sml-10">
            <div class="input-text--primary flex-container--row flex-container--left-bottom">
                <span>@</span>
                <input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="validationFunctions.checkChannelName(event.target.value)">
                <span id="input-success-channel-name" class="info-message--success"></span>
            </div>
        </div>
    </div>
    <div class="row row--wide row--short">
        <div class="column column--3 column--sml-10">
            <label class="label" for="new-channel-password">Password:</label>
        </div><div class="column column--6 column--sml-10">
            <div class="input-text--primary">
                <input type="password" name="new-channel-password" id="new-channel-password" class="input-text"  placeholder="" value="" >
            </div>
        </div>
    </div>

    <div class="row row--wide">
        <button class="button--primary" onclick="publishNewChannel(event)">Create Channel</button>
    </div>
</form>


<div id="channel-publish-in-progress" hidden="true">
    <p>Creating your new channel.  This may take a few seconds...</p>
    <div id="create-channel-progress-bar"></div>
</div>

<div id="channel-publish-done" hidden="true">
    <p>Your channel has been successfully created!</p>
</div>