{% extends "layout.html" %}

{% block title %}
    Optimized
{% endblock %}

{% block main %}
<div class="col-sm-12" style="background-color: #0f11175c; padding: 20px">
	<font color="white" size="5">
    <div>
        <p>Your function is $f(x) = {{ f }}$</p>
        <p>Your maximum value is ${{ max_output }}$ and your minimum value is ${{ min_output }}$</p>
    </div>
	</font>
</div>
	<font color="white">
    <table class="table table-hover" action="optimized">
      <tbody>
        <tr class="bg-dark text-white">
            <td>Step 1</td>
            <td>Take the Derivative</td>
        </tr>
        <tr class="table-secondary">
            <td></td>
            <td>$f'(x) = {{ fprime }}$</td>
        </tr>
        <tr class="bg-dark text-white">
            <td>Step 2</td>
            <td>Set $f'(x) = 0$</td>
        </tr>
        <tr class="table-secondary">
            <td></td>
            <td>$0 = {{ fprime }}$</td>
        </tr>
        <tr class="bg-dark text-white">
            <td>Step 3</td>
            <td>Solve for $x$:</td>
        </tr>
        {% for extrema in extremaX %}
            <tr class="table-secondary">
                <td></td>
                <td>$x = {{ extrema }}$</td>
            </tr>
        {% endfor %}
        <tr class="bg-dark text-white">
            <td>Step 4</td>
            <td>Plug VALID solutions and endpoints into $f(x)$:</td>
        </tr>
        {% for candidate in candidatesX %}
            <tr class="table-secondary">
                <td></td>
                <td>$f({{ candidate }}) = {{candidatesY[loop.index - 1]}}$</td>
            </tr>
        {% endfor %}
        <tr class="bg-dark text-white">
            <td>Step 5</td>
            <td>Grab the highest and lowest values</td>
        </tr>
        <tr class="table-secondary">
            <td></td>
            <td>Your maximum value is ${{ max_output }}$</td>
        </tr>
        <tr class="table-secondary">
            <td></td>
            <td>Your minimum value is ${{ min_output }}$</td>
        </tr>
      </tbody>
    </table>
	</font>

  <img src={{url}} alt='Chart' height='500' width='500'>



{% endblock %}