$def with (doc, data={}, status=None)

$putctx('cssfile', 'form')
$putctx("show_ol_shell", False)
$putctx('robots', 'noindex,nofollow')

$if doc.type.key == "/type/author":
    $ intro = _("There are two ways to put an author's image on Open Library.")
    $ action = doc.url('/add-photo')
    $ guideline = _("Image Guidelines")
$else:
    $ intro = _("There are a few ways to put a cover image on Open Library.")
    $ action = doc.url('/add-cover')
    $ guideline = _("Cover Guidelines")

<div class="popAlert" id="errors" style="display: $('block' if status else 'none')">
$if status:
    $if status.code == 1: $_("Please provide a valid image.")
    $elif status.code == 2: $_("Please provide an image URL.")
    $elif status.code == 3: $_("Please provide a valid image.")
</div>

<div class="imageIntro">$intro  <span>$:_('Learn more by reading our <a href="/help/faq/editing#picture" target="blank">%(guidelines)s</a>.', guidelines=guideline)</span></div>
$if doc.type.key == "/type/work":
    $if doc.get_edition_covers():
        <form class="ol-cover-form ol-cover-form--id" method="post" enctype="multipart/form-data" action="$action">
            <div class="formElement">
                <div class="label">
                    <label>$:_("<strong>Pick one</strong> from the existing covers")</label>
                </div>
                <div class="carousel-section">
                    <div id="covers" class="carousel-container carousel-container-decorated carousel--minimal">
                        <div class="carousel carousel--progressively-enhanced" data-config="$json_encode({'booksPerBreakpoint': [3, 3, 3, 3, 2, 1]})">
                            $for cover in doc.get_edition_covers():
                                <div class="book carousel__item">
                                    <div class="book-cover">
                                        <img src="$cover.url(size='M')" width="100" class="bookcover"/>
                                        <button type="submit" name="coverid" value="$cover.id" class="cta-btn cta-btn--vanilla">$_("Use this image")</button>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

<form class="ol-cover-form ol-cover-form--upload" method="post" enctype="multipart/form-data" action="$action">
    <div class="label">
        <label for="coverFile">$_("Choose a JPG, GIF or PNG on your computer")</label>
    </div>
    <div class="input">
        <input type="file" name="file" id="coverFile" value="" accept=".jpg, .jpeg, .gif, .png" required/>
        <button type="submit" class="cta-btn cta-btn--vanilla">$_("Upload")</button>
    </div>
</form>

$#<form class="ol-cover-form ol-cover-form--url" method="post" enctype="multipart/form-data" action="$action">
$#    <div class="label">
$#        <label id="imageWeb" for="imageUrl">$_("Or, paste in the image URL if it's on the web")</label>
$#    </div>
$#    <div class="input">
$#        <input type="url" name="url" id="imageUrl" value="$data.get('url', '')" placeholder="https://..." required />
$#        <button type="submit" class="cta-btn cta-btn--vanilla">$_("Submit")</button>
$#    </div>
$#</form>

$if doc.type.key == "/type/edition" and doc.ocaid:
    $ img_url = "https://archive.org/services/img/%s/full/pct:600/0/default.jpg" % doc.ocaid
    <form class="ol-cover-form ol-cover-form--ia" method="post" enctype="multipart/form-data" action="$action">
        <div class="label">
            <label>$_("Or, use the the cover from Internet Archive")</label>
        </div>
        <div class="input">
            <a href="$img_url" target="_blank">
                <img class="ol-cover-form--ia_image" src="$img_url" style="height: 200px" />
            </a>
            <button type="submit" id="coverIA" class="cta-btn cta-btn--vanilla" name="url" value="$img_url">$_("Use this image")</button>
        </div>
    </form>

$:macros.LoadingIndicator(_("Uploading..."))