{{extends file="base.html"}}

{{block name=head}}
    <script type='text/javascript'>
        function updateDescriptionCharCount() {
            var desclen = document.getElementById('description').value.length;
            document.getElementById('descriptionCharCount').innerHTML = desclen;
            if (desclen < 1000)
                document.getElementById('descriptionContainer').setAttribute('class', 'columns small-12');
            else
                document.getElementById('descriptionContainer').setAttribute('class', 'columns small-12 error');
        }
    </script>
{{/block}}

{{block name=content}}
    <div class='row'>
        <div class='columns small-12 medium-5 large-6'>
            {{if isset($announcement) and !$announcement.is_important}}
                <div class='row'>
                    <div class='columns small-12'>
                        <div class='panel callout'>
                            <h3>{{$announcement.title}}</h3>
                            {{if $announcement.abstract}}
                                <p>{{$announcement.abstract}}</p>
                                <p><a href='/announcement/{{$announcement.id}}/{{$announcement.title}}'>Read more…</a></p>
                            {{else}}
                                <p>{{$announcement.content}}</p>
                            {{/if}}
                            <div class='text-right announce-foot'>{{$announcement.date|date_format:'%A, %Y-%m-%d %H:%M'}}</div>
                        </div>
                    </div>
                </div>
            {{/if}}
                <p>
                    Make a feed of almost anything!*<br>
                    <span style='font-size: small;'>* Currently, everything means only HTTP(S)</span>
                </p>
        </div>
        <div class='columns small-12 medium-7 large-6'>
            <form action='/create/' method='post'>
                <div class='row'>
                    <div class='columns small-12{{if $form.name.has_error}} error{{/if}}'>
                        <label for=slug>Name <small>Required; Allowed Chars: a-z A-Z 0-9 _ . -</small></label>
                        <input type=text name=slug id=slug required pattern='^[a-zA-Z0-9_\.\+-]+$' placeholder='Name' autofocus value='{{$form.name.value}}'>
                        {{if $form.name.has_error}}<small class='error'>{{$form.name.error_message}}</small>{{/if}}
                    </div>
                </div>
                <div class='row'>
                    <div class='columns small-12{{if $form.uri.has_error}} error{{/if}}'>
                        <label for=uri>URI <small>Required</small></label>
                        <input type=text name=uri id=uri required pattern='^https?://[a-zA-Z0-9_\.-]+\.[a-zA-Z0-9]{2,}(/.*)?$' placeholder='https://example.com/news/'  value='{{$form.uri.value}}'>
                        {{if $form.uri.has_error}}<small class='error'>{{$form.uri.error_message}}</small>{{/if}}
                    </div>
                </div>
                <div class='row'>
                    <div class='columns small-7 medium-6 large-4{{if $form.interval.has_error}} error{{/if}}'>
                        <input type=radio name=refresh id=refresh_interval value=interval{{if !$form.refresh_on_request.checked}} checked{{/if}}>
                        <label for=refresh_interval class='inline'>Refresh iterval</label>
                    </div>
                    <div class='columns small-5 medium-6 large-3{{if $form.interval.has_error}} error{{/if}}'>
                        <select name=interval id=interval required>
                            <option value='900'{{if $form.interval.value == 900}} selected{{/if}}>15 minutes</option>
                            <option value='1800'{{if $form.interval.value == 1800}} selected{{/if}}>30 minutes</option>
                            <option value='3600'{{if $form.interval.value == 3600 or !isset($form.interval.value)}} selected{{/if}}>1 hour</option>
                            <option value='7200'{{if $form.interval.value == 7200}} selected{{/if}}>2 hours</option>
                            <option value='10800'{{if $form.interval.value == 10800}} selected{{/if}}>3 hours</option>
                            <option value='21600'{{if $form.interval.value == 21600}} selected{{/if}}>6 hours</option>
                            <option value='43200'{{if $form.interval.value == 43200}} selected{{/if}}>12 hours</option>
                            <option value='86400'{{if $form.interval.value == 86400}} selected{{/if}}>24 hours</option>
                        </select>
                        {{if $form.interval.has_error}}<small class='error'>{{$form.interval.error_message}}</small>{{/if}}
                    </div>
                    <div class='columns small-12 medium-12 large-5'>
                        <input type=radio name=refresh id=refresh_on_request value=request {{if $form.refresh_on_request.checked}} checked{{/if}}>
                        <label for=refresh_on_request class='inline'>Refresh on request</label>
                    </div>
                </div>
                <div class='row{{if $form.expire.has_error}} error{{/if}}'>
                    <div class='columns small-5 medium-6 large-4'>
                        <input type=checkbox name=expire id=expire{{if $form.expire.checked}} checked{{/if}}>
                        <label for=expire class='inline'>Expire in</label>
                    </div>
                    <div class='columns small-7 medium-6 large-8'>
                        <div class='row collapse'>
                            <div class='columns small-4 medium-5 large-5'>
                                <input type=text name=expire_value id=expire_value  value='{{$form.expire.value}}'>
                            </div>
                            <div class='columns small-8 medium-7 large-7'>
                                <select name=expire_unit id=expire_unit class='text-left postfix'>
                                    <option value='h'{{if $form.expire.unit == 'h'}} selected{{/if}}>hours</option>
                                    <option value='d'{{if $form.expire.unit == 'd'}} selected{{/if}}>days</option>
                                    <option value='w'{{if $form.expire.unit == 'w'}} selected{{/if}}>weeks</option>
                                    <option value='m'{{if $form.expire.unit == 'm'}} selected{{/if}}>months</option>
                                </select>
                            </div>
                        </div>
                        {{if $form.expire.has_error}}<small class='error'>{{$form.expire.error_message}}</small>{{/if}}
                    </div>
                </div>
                <div class='row'>
                    <div class='columns small-12{{if $form.description.has_error}} error{{/if}}' id='descriptionContainer'>
                        <label for=description>Description <small>No HTML Allowed. <span id='descriptionCharCount'>0</span> of 1000 Characters Used.</small></label>
                        <textarea name=description id=description rows=2 oninput='updateDescriptionCharCount()'>{{$form.description.value}}</textarea>
                        {{if $form.description.has_error}}<small class='error'>{{$form.description.error_message}}</small>{{/if}}
                    </div>
                </div>
                <div class='row'>
                    <div class='columns small-12{{if $form.password.has_error}} error{{/if}}'>
                        <label for=password>Password <small>for Editing and Deleting</small></label>
                        <input type=password name=password id=password oninput='passwordChanged()'>
                        {{if $form.password.has_error}}<small class='error'>{{$form.password.error_message}}</small>{{/if}}
                    </div>
                </div>
                <div class='row' id='password_verificationContainer'>
                    <div class='columns small-12{{if $form.password.has_error}} error{{/if}}'>
                        <label for=password_verification>Password verification</label>
                        <input type=password name=password_verification id=password_verification>
                        {{if $form.password_verification.has_error}}<small class='error'>{{$form.password_verification.error_message}}</small>{{/if}}
                    </div>
                </div>
                <div class='row'>
                    <div class='columns small-12'>
                        <input type=submit class='button' value='Feedize it!'>
                    </div>
                </div>
            </form>
        </div>
    </div>
{{/block}}