{% extends "master-admin.html" %}
{% block main %}
    <h2>{{ title }}</h2>
    {% if message %}
    <div class="alert alert-{{message_type}}">
        <p>{{ message }}</p>
    </div>
    {% endif %}
    <div id="options">
        <form role="form" id="{{ name }}" action="{{ action }}" method="post" enctype="multipart/form-data">

        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" name="name" value=""
                   title="A nickname used to easily identify the Service Provider.
                          Only alphanumeric characters and spaces are accepted"/>
        </div>

        <div class="form-group">
            <label for="name">Description:</label>
            <input type="text" class="form-control" name="description" value=""
                   title="A description of the services this Service Provider provides"/>
        </div>

        <div class="form-group">
            <label for="name">Visible in IdP Portal: </label>
            <input type="checkbox" name="portalvisible" checked
                   title="Show this Service Provider in the IdP Portal"/>
        </div>

        <div class="form-group">
            <label for="image">Portal image:</label>
            <input type="file" name="imagefile" id="image"
                   title="Image to display for this Service Provider in the IdP Portal. Scale to 100x200 for best results."
                   accept=".png,.jpg"
            />
        </div>

        <div class="form-group">
            <label for="splink">Link to Service Provider:</label>
            <input type="text" class="form-control" name="splink" value=""
                   title="Link to the Service Provider"
            />
        </div>

        <div class="form-group">
            <label for="metafile">Metadata file:</label>
            <input type="file" name="metafile" id="file"
                   title="The metadata file generated by the Service Provider"/>
        </div>
        - OR -
        <div class="form-group">
            <label for="metaurl">Metadata url:</label>
            <input type="text" name="metaurl" id="url"
                   title="The metadata url exposed by the Service Provider (ex. http://service.provider/saml/metadata )"/>
        </div>
        - OR -
        <div class="form-group">
            <label for="metatext">Metadata text:</label>
            <br>
            <textarea name="metatext" rows="10" cols="80"
                      title="The metadata generated by the Service Provider"
                      form="{{ name }}"></textarea>
        </div>

        <button id="submit" class="btn btn-primary" name="submit" type="submit" value="Submit">
            Save
        </button>
        <a href="{{ back }}" class="btn btn-default" title="Back">Back</a>
        </form>
    </div>

<script>
    function verifyFile(filename, objid, failtext) {
        var reader = new FileReader();
        reader.readAsDataURL(filename); // read the local file

        reader.onloadend = function(e){
            var contents = e.target.result;
            if (!contents) {
                window.alert(failtext)
                document.getElementById(objid).value = null;
            }
        }
    }

    $(function() {
        $("#file").on("change", function()
        {
            var files = !!this.files ? this.files : [];
            if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

            verifyFile(files[0], 'file', 'Metadata file is unreadable');
        });
    });

    $(function() {
        $("#image").on("change", function()
        {
            var files = !!this.files ? this.files : [];
            if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

            verifyFile(files[0], 'image', 'Image file is unreadable');
        });
    });
</script>
{% endblock %}